移动端适配知识梳理

屏幕适配是移动端开发中不可避免的一个问题,也是前端人员必须了解清楚的一个问题。

了解移动端的知识

viewport
viewport是用户网页的可视区域。手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
像素
css中的像素只是一个抽象的单位,早期的手机屏幕像素密度较低,一个css像素等于一个物理像素。但是随着手机的屏幕像素密度越来越高,比如Retina,相同的手机尺寸,分辨率却提高了一倍,这就意味着同样大小的屏幕上,像素多了一倍,这时一个css像素是等于两个物理像素的。
在移动端浏览器中,window对象有一个dpr属性(设备物理像素和设备独立像素的比例),也就是说dpr=物理像素/独立像素,所以在Retina屏幕中,dpr=2,看图说话。
clipboard.png

meta
在移动端开发时,我们需要在头部加上一句<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • width:控制viewport的大小,可以指定的一个值或者特殊的值,如device-width为设备的宽度(单位为缩放为100%时的CSS像素)。

  • height:和width相对应,指定高度。

  • initial-scale:初始缩放比例,也即是当页面第一次load的时候缩放比例。

  • maximum-scale:允许用户缩放到的最大比例。

  • minimum-scale:允许用户缩放到的最小比例。

  • user-scalable:用户是否可以手动缩放。

移动端适配的几种方案

rem
rem是指相对于根元素的字体大小的单位,我们可以通过设置html的字体大小就可以控制rem的大小。
需要注意的是,字体的大小不要用rem,我们可以根据不同的dpr做相应的处理。
方法一
可以用css3的媒体查询@media,这种方法可以适配大部分机型。

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

方法二
想要实现多终端适配,这里推荐手淘团队的lib-flexible库,具体实现方法可以参考https://github.com/amfe/artic...
方法三
css3的新单位vw,vh。1vw等于可视区宽度(屏幕的可视区域即布局区域)的百分之一,1vh等于可视区高度的百分之一。可惜这个单位目前还有很多浏览器不支持。

目前我知道的方法就这几个,如果还有希望大家补充。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值