移动端屏幕适配问题

时间 2019-11-09

标签移动屏幕适配问题栏目无线繁體版

原文原文链接

为了作移动适配，css3出了一个新单位rem，rem就是相对于根元素<html>的font-size来作计算，根目录通常用20px（一是方便计算，二是谷歌浏览器不支持12px如下的字体）；css

html{font-size：20px}，默认为20px；html

@media only screen and (max-width: 1220px) and (min-width: 992px){
html{
　　font-size: 50px;
　}
}ios

意思就是屏幕的尺寸在992px和1220px范围内html的字体大小就采用50px；根据实际状况触类旁通列出主流的屏幕尺寸就能够，若是以为不够严谨就能够用js动态设置html的字体大小；css3

<script>web

　　document.getElementsByTagName('html')[0].style.fontSize=window.innerWidth/10+'px';浏览器

</script>sass

10也能够换作其余，取10是为了方便计算；less

若是以为单位换算麻烦，能够采用less或者sass等预处理器去完成；固然，单位方面也能够采用vw或vh去进行计算，1vw就是屏幕宽度的1%；1vh就是屏幕高度的1%；ide

布局方面能够用flex布局；布局

移动开发经常出现的几个问题及解决办法：

一：高清图片处理

img 100px *100px

高清屏 200dp*200dp 渲染模糊，dpr=2的状况下

解决办法 50px *50px 获得正确结果

二：一像素边框

一样是高清屏下的问题，根本缘由是1px使用2dp来渲染

border：0.5px 这种写法仅在ios8能够起做用；

解决方案：

.sidebar .folder li{position:relative}

.folder li+li:before{

　　position:absolute;

　　top:-1px;

　　left:0;

　　content:'';

　　width:100%;

　　height:1px;

　　border-top:1px solid #ddd;

　　-webkit-transform:scaleY(0.5);

}