1, 推荐使用 HSLA 而不是 RGBA 来产生半透明的白色
理由: HSLA 的字符长度更短, 敲起来更快. 重复度更低.
RGBA
语法: rgba(0-255,0-255,0-255,0-1)
示例: 50% 透明度的黑色
background-color: rgba(0,0,0,.5);
拓展:
HEX 十六进制黑色: background-color: #000000;
- RGB:background-color: rgb(0,0,0);
- ??RGB+opacity:
- background-color: rgb(0,0,0);
- opacity: .5;
- HLSA:
HLS, 是按照人类对颜色认知的习惯来生成的一种颜色表示法, H 表示色相 (hue), 其值的范围是 0~360,S 表示饱和度 (saturation), 其值范围是 0~100%,L 表示亮度 (light), 其值范围是 0~100%.
色相, hue,0/360 表示红色, 60 表示黄色, 120 表示绿色, 180 表示青色, 240 表示蓝色, 300 表示紫色 / 品红色
饱和度, saturation, 表示纯色加灰度的量, 0% 颜色为灰色, 100% 最鲜艳, 每一处都为纯色
亮度, light, 加白亮度高, 加黑亮度低
HLSA,A 为 alpha 通道, 表示不透明度, 0/.5/1
希望子号和其他尺寸能与父级的字号建立关联, 则建议使用 em 单位
px:
px,pixel, 像素, 相对长度单位, 相对于显示器分辨率而言.
特点:
IE 无法调整那些使用 px 作为单位的字体大小
国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位
?? Firefox 能够调整 px 和 em,rem, 但是 96% 以上的中国网民使用 IE 浏览器 (或内核)
示例:
- font-size: 1px;
- em:
em, 相对长度单位, 相对于当前对象内文本的字体尺寸.
如果当前对行内文本的字体尺寸还未被设置, 则相对于浏览器的默认字体尺寸
特点:
em 的值并不是固定的
em 会继承父级元素的字体大小
?? 任意浏览器的默认字体高都是 16px. 所有未经调整的浏览器都符合: 1em=16px
则 12px=0.75em,10px=0.625em
注意:
为了简化 font-size 的换算, 需要在 CSS 中的 body 选择器中声明 Font-size=62.5%, 这就使 em 值变为 16px*62.5%=10px, 即 12px=1.2em, 10px=1em. 所以我们在写 CSS 的时候, 需要注意三点:
1. body 选择器中声明 Font-size=62.5%;
2. 将原来的 px 数值除以 10, 换上 em 即可作为单位;
3. 重新计算那些被放大的字体的 em 数值. 避免字体大小的重复声明;
划重点, 这也避免了 1.2 * 1.2= 1.44 的现象. 比如说你在 #content 中声明了字体大小为 1.2em, 但是在声明 #content 内部的 p 的字体大小时就只能是 1em, 而不是 1.2em, 因为此 em 非彼 em, 它因继承 #content 的字体高而变为了 1em=12px.
示例:
- padding: .3em .8em;
- height: 2em;
- rem:
rem,root em, 相对单位, 相对的是 html 跟元素
特点:
这个单位可谓集相对大小和绝对大小的优点于一身, 通过它
既可以做到只修改根元素就成比例地调整所有字体大小
又可以避免字体大小逐层复合的连锁反应
但在某些情况下, 你可能希望这些尺寸是和根级子号, 即 < html > 元素的字号, 是相关联的. 此时使用 em, 可能会产生复杂的计算, 因此, 可以使用 rem 单位. 在 CSS 中, 相关性是一个很重要的特性, 必须清楚到底哪些东西是真正相关的.
示例:
font-size: 12rem;
结语:
选择使用什么字体单位主要由你的项目来决定, 如果你的用户群都使用最新版的浏览器, 那推荐使用 rem, 如果要考虑兼容性, 那就使用 px, 或者两者同时使用.
对于只需要适配少部分手机设备, 且分辨率对页面影响不大的, 使用 px 即可 . 对于需要适配各种移动设备, 使用 rem, 例如只需要适配 iPhone 和 iPad 等分辨率差别比较挺大的设备.
避免不必要的媒体查询
媒体查询
响应式设计, responsive design, 是一种让网站针对不同的浏览器和设备呈现不同的显示效果.
媒体查询, media queries,@media, 实现响应式设计的最强大的工具. 常用的应用是使用百分比宽度来布局, 当浏览器变窄, 并且无法容纳侧边栏中的菜单时, 把布局显示成一列:
- @media
- screen
- and
- (
- min-width:600px) {
- nav
- {
- float
- :
- left
- ;
- width: 25%; }
- section
- {
- margin-left
- : 25%; } }
- @media
- screen
- and
- (
- max-width
- :
- 599px
- )
- {
- nav
- li
- {
- display
- : inline; } }
更多可前往 MDN document https://developer.mozilla.org/en-US/docs/web/CSS/Media_Queries/Using_media_queries
遵从 "尽量减少代码重复" 所描述的原则对媒体查询的使用也是很有帮助的, 因为你不需要去覆盖媒体查询里同样数量的声明, 这在本质上减轻了它们所产生的维护成本.
避免不必要的媒体查询的建议:
使用百分比长度代替固定长度, 或者尝试使用与视口相关的单位, vw,vh,vmin,vmax 等, 这些值解析为视口宽度或高度的百分比
假如需要在较大分辨率下得到固定宽度, 使用 max-width, 可以无需使用媒体查询
?? 记得为替换元素, 比如 img,object,video,iframe 等, 设置一个 max-width, 值为 100%
假如背景图片需要完整地铺满整个容器, 不管容器尺寸如何变化, background-size: cover 这个属性都可以做到, 但是, 我们也要时刻牢记, 带宽不是无限的, 因此在移动网页中通过 CSS 把一张图片缩小显示往往不是太明智
?? 当图片, 或者其他元素需要以行列式进行布局时, 让视口的宽度来设定列的数量, 弹性盒布局 flexbox 或 display: iinline-block 加上常规的文本折行行为, 都可以实现
在使用多列文本时, 指定 column-width 列宽而不俗指定 column-count 列数, 这样可以在较小的屏幕上自动显示为当列布局
总的来说, 尽最大努力实现弹性可伸缩的布局, 并在媒体查询的各个断点区间内指定相应的尺寸, 当网页本身的设计足够灵活时, 让它变成响应式应该只需要一些简短的媒体查询代码.
结语:
弹性可伸缩, 响应式设计, 即想让网页在一堆不同的设备上合理展示, 只需要在最终产品上添加一些 CSS 媒体查询即可. 前提是你的布局使用的方法足够弹性可伸缩 (如上面的几种方法). 因此, 优化网页在小屏幕的表现, 其实只意味着把一些外边距收拢到最小程度, 然后因为屏幕太窄无法显示双列的侧栏调整为单列布局而已.
CSS 简写属性和展开式属性
简写属性: background: red;
展开式属性: background-color: red;
注意, 要合理使用简写:
或者说, 不要害怕使用简写属性, 因为, 展开式属性在未来会越来越多, 那时代码则无法完全覆盖了, 合理使用简写是一种良好的防卫性编码方式, 可以抵御未来的风险.
当然, 如果要明确地区覆盖某个具体的展开式属性并保留其他相关样式, 那就需要使用了. 所以, 展开式属性和简写属性的配合使用其实更加常用并且有用.
比如, 把写在某一简写属性里的多个相同的部分提取出来:
- background: url() top right, url() bottom right, url() top left;
- background-size: 2em 2em;
- background-repeat: no-repeat;
应该使用预处理器如 less,sass 吗?
现在有很多 CSS 预处理器, 比如 Stylus,Sass,LESS 等, 它们为 CSS 的编写提供便利, 比如变量, mixin, 函数, 规则嵌套, 颜色处理
特点:
1, 适用于大型项目中, 可以让代码更加灵活, 健壮, DRY
2,CSS 的文件体积和复杂度可能会失控 (编译之后)
3, 调试难度会增加, 因为在开发工具种看到的代码不是自己写的 CSS 源代码 (不过, 这个问题已经大大好转, 因为已经有许多调试工具开始支持 SourceMap,SourceMap 是一种非常酷的新技术, 可以告诉浏览器哪些编译生成的 CSS 代码对应哪些预处理器 CSS 代码)
4, 预处理器在开发过程中会引入一定程度的延时, 因为需要等待代码编译成 CSS
来源: http://www.bubuko.com/infodetail-2674273.html