一、单位
- px 固定的单位;
- em 是依据其父元素的字体大小来设置(太多的不确定性);
- rem 是依据网页的根元素(html)来设置字体大小。
- vw window.innerWidth 的数值的 1%
- vh window.innerHeight 的数值的 1%
字体适配
html{
/* 以 16px 为基数 */
font-size: 100%;
}
@media screen and (max-width: 414px){
html{
/*// 以 8px 为基数 */
font-size: 50%;
}
}
@media screen and (min-width: 1366px){
html{
/*// 以 16px 为基数 */
font-size: 100%;
}
}
.lma{
font-size: 1rem;
padding: 0.3rem;
}
二、srcset 提供多图像源
<img src="source.jpg" width="100%"
srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">
2x、3x 示意指标屏幕的像素密度;400w、600w 示意指标浏览器的宽度的限度,如浏览器宽度 550w 时,匹配 600w 的 src。
通过 window.devicePixelRatio 来获取像素比
三、边框 1px 适配:伪类 +transform
原理是把原先元素的 border 去掉,而后利用 :before 或者 :after 重做 border,并 transform 的 scale 放大一半,原先的元素绝对定位,新做的 border 相对定位。
transform: scaleY(0.5);
transform: scale(0.5);
四、布局
前端的布局倒退历程经验了上面几个过程:
表格布局 –> 定位布局 –> 浮动布局 –> flexbox 布局 –> gridbox 布局
flexbox 是一维布局,只能在一条直线上搁置你的内容区块;
而 grid 是一个二维布局。它除了能够灵便的管制程度方向之外,还能轻易的管制垂直方向的布局模式。
参考链接:https://www.cnblogs.com/pinga…