移动端屏幕适配问题
2016-09-01 15:03
225 查看
为了做移动适配,css3出了一个新单位rem,rem就是相对于根元素<html>的font-size来做计算,根目录一般用20px(一是方便计算,二是谷歌浏览器不支持12px以下的字体);
html{font-size:20px},默认为20px;
@media only screen and (max-width: 1220px) and (min-width: 992px){
html{
font-size: 50px;
}
}
意思就是屏幕的尺寸在992px和1220px范围内html的字体大小就采用50px;根据实际情况举一反三列出主流的屏幕尺寸就可以,如果觉得不够严谨就可以用js动态设置html的字体大小;
<script>
document.getElementsByTagName('html')[0].style.fontSize=window.innerWidth/10+'px';
</script>
10也可以换做其他,取10是为了方便计算;
如果觉得单位换算麻烦,可以采用less或者sass等预处理器去完成;当然,单位方面也可以采用vw或vh去进行计算,1vw就是屏幕宽度的1%;1vh就是屏幕高度的1%;
布局方面可以用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);
}
html{font-size:20px},默认为20px;
@media only screen and (max-width: 1220px) and (min-width: 992px){
html{
font-size: 50px;
}
}
意思就是屏幕的尺寸在992px和1220px范围内html的字体大小就采用50px;根据实际情况举一反三列出主流的屏幕尺寸就可以,如果觉得不够严谨就可以用js动态设置html的字体大小;
<script>
document.getElementsByTagName('html')[0].style.fontSize=window.innerWidth/10+'px';
</script>
10也可以换做其他,取10是为了方便计算;
如果觉得单位换算麻烦,可以采用less或者sass等预处理器去完成;当然,单位方面也可以采用vw或vh去进行计算,1vw就是屏幕宽度的1%;1vh就是屏幕高度的1%;
布局方面可以用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);
}
相关文章推荐
- 检查版本更新,跳转到腾讯应用宝进行下载
- Android存储数据方式
- unity如何检测第一次打开APP
- android图标美工设计尺寸与处理方法
- iOS杂七杂八
- android 6.0权限处理
- 警告: com.mchange.v2.async.ThreadPoolAsynchronousRunner$DeadlockDetector@96015c5 -- APPARENT DEADLOCK!
- android 3D旋转效果实现
- Android 4.4 以上添加系统信息数据
- 安装编译好的Android镜像到模拟器上 (android 7.0)
- Android生命周期中几个重要的函数
- Android下拉刷新上拉加载控件,对所有View通用!
- Android核心安全机制(一)
- 微信开发者-接口的相关配置
- appium 原理
- ios开发中的一点小经验
- Android真机测试安装时报错Installation error: INSTALL_FAILED_DEXOPT
- WebView及其应用
- iOS--本地存储加密
- IOS实现上滑隐藏NvaigtionBar而下拉则显示效果