CSS 开发随笔

发表于 阅读次数： 评论数： 本文字数： 750 阅读时长 ≈ 1 分钟

CSS 3 的优缺点

CSS 3 是最新版本的 CSS，是对原来 CSS 2 的功能增强，用于网页样式设计。CSS 3 具有更强大的选择器、多列布局、圆角边框、阴影效果、渐变、动画、媒体查询等功能，让开发者可以更轻松地实现各种视觉效果和响应式设计。

CSS 3 的优点

CSS 3 提供了一些在原来 CSS 2 中实现起来比较困难或者不能实现的功能，比如：

  • 渐变
  • 圆角边框
  • 盒子和文字的阴影效果
  • 转换、移动、缩放、旋转等
  • 过渡、动画都可以使用动画
  • 可以使用媒体查询实现响应式网站

CSS 3 的缺点

  • 兼容性问题：某些 CSS 3 属性可能不支持一些旧版本浏览器，这将导致在不同浏览器中显示效果不一致或出现兼容性问题。
  • 性能问题：使用复杂的 CSS 3 属性和选择器，可能会影响页面加载和渲染速度，使页面变得缓慢。
  • 过多选择器使用：过度使用复杂的选择器会增加页面渲染的负担，降低网页性能。
  • 代码复杂性：随着项目规模的增大，使用大量 CSS 3 特性和复杂的选择器可能导致样式代码变得复杂和难以维护。
  • 浏览器厂商私有前缀：有些 CSS 3 属性需要添加不同浏览器厂商的私有前缀以适配各大浏览器，这增加了编写和维护 CSS 代码的工作量。
  • 学习曲线：CSS 3 引入了许多新的特性和概念，有时可能比较复杂，需要较长时间的学习才能熟练掌握。

移动端自适配

隐藏或显示页面内容

有些页面内容适合在 PC 端显示，但是不适合在移动端显示（比如盒子过大，遮挡内容）或者在移动端显示毫无意义等，此时可以使用下面的 CSS 代码来实现：PC 端显示，移动端隐藏

1
2
3
4
5
6
7
<body>
    <div class="wapnone">移动端要判断隐藏的内容</div>
    <div class="tool_cai">移动端要判断隐藏的内容</div>
    <div class="tool_code">移动端要判断隐藏的内容</div>
    <div class="tool_zan">移动端要判断隐藏的内容</div>
    <div id="player">移动端要判断隐藏的内容</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 调用单个class */
@media screen and (max-width: 1221px) {
    .wapnone {
        display: none;
    }
}

/* 调用多个class */
@media screen and (max-width: 1221px) {
    .tool_cai, .tool_code, .tool_zan {
        display: none;
    }
}

/* 调用id */
@media screen and (max-width: 1221px) {
    #player {
        display: none;
    }
}

提示

1、1221px 是屏幕的宽度，具体数值可以自行调试
2、max-width: 1221px 表示如果屏幕宽度在 1221 像素以下（移动端），则对应的 CSS 类就会生效
3、同理的，min-width: 1221px，表示如果屏幕宽度在 1221 像素以上（PC 端），则对应的 CSS 类就会生效