- browerhack 各种浏览器兼容性写法
- html5shiv 让不支持html5的浏览器支持html5
- 腻子 抹平浏览器的差异性
- 对不确定的元素主动检测兼容性
- 查看浏览器的兼容性情况
- npm 查看npm安装的包信息
- 在多设备上调试实现同步的效果
- http-server服务部署
px
在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小;em
的值并不是固定的,会继承父级元素的字体大小,代表倍数;rem
的值并不是固定的,始终是基于根元素 的,也代表倍数。
em 的使用是相对于其父级的字体大小的,即倍数。浏览器的默认字体高都是 16px,未经调整的浏览器显示 1em = 16px。但是由于 em 是相对于其父级字体的倍数的,当出现有多重嵌套内容时,使用 em 分别给它们设置字体的大小往往要重新计算。比如说你在父级中声明了字体大小为 1.2em,那么在声明子元素的字体大小时设置 1em 才能和父级元素内容字体大小一致,而不是1.2em(避免 1.2*1.2=1.44em), 因为此 em 非彼 em。
rem 的出现再也不用担心还要根据父级元素的 font-size 计算 em 值了,因为它始终是基于根元素()的。 比如默认的 html font-size=16px,那么想设置 12px 的文字就是:12÷16=0.75(rem)
谷歌浏览器默认字体大小最小是12px,如果为了计算方便而将html根元素字体设置为10px,即html{font-size:10px;}
此时子元素使用rem时来设置字体大小以及height\width等要注意:
-
当字体大小小于12px时浏览器一律显示12px,如p{font-size:0.9rem;},实际浏览器将p元素内字体大小以1.2rem显示
-
当rem设置height\width时rem和px转换比是1:12,并非1:10。原因:谷歌浏览器默认字体大小最小是12px
一般来说,如果需要统一字体大小,建议用 rem,但有些局部,相对动态需要根据父元素字体来设置大小的,会选用 em。另外还有一些比较特殊的情况,比如需要与固定像素的图片配合布局等,那就要用到 px 了。
像头部导航 左右两边没有竖线 其他都用竖线隔开就可以使用这种方法实现:
header .top ul li + li { /* 从第一个li的兄弟元素开始 及第二个li开始执行该代码*/
border-left: 1px solid #999;
margin-left: -3px;
}
p{
display: inline-block;
width: 200px;
height: 20px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
最实用的方法
.clearfix:before,.clearfix:after{
content: '';
display: table;
}
.clearfix:after{
clear: both;
}
-webkit-filter: grayscale(100%); /*CSS3 grayscale滤镜图片变黑白*/
filter: grayscale(100%);
只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。
::selection{
color:#ff0000;
}
::-moz-selection{
color:#ff0000;
}
使用polyfill(picturefill)是浏览器兼容picture标签