一、做移动端适配的常用基础知识
二、移动端适配常见的两种形式
大部分移动端适配最常用的就是rem单位
第一种scale固定
- 3.font-size一般不用rem表示,我们可以采用媒体查询去设置
-
4.当deviceWidth大于设计稿的宽度时
- 逻辑像素下的html的font-size始终等于物理像素下的html的font-size
- 比如此例中deviceWidth大于540px,则物理像素大于1080px,应该去访问pc站了。废话不多说了直接上代码:
第二种scale不固定,逻辑像素=物理像素,此时dpr*scale=1
- 设置meta viewport
- 同理,假设此处设计稿宽度为750px,设备为iphone(其dpr为2),html font-size设为100px,我们设置html的font-size=deviceWidth / 7.5
桥豆麻袋?此处代码似曾相似,这不就是和第一种第二步一样的吗,为啥辛苦走这一遭嘞?
看官切勿着急,请听我娓娓道来,>_>
由于scaledpr===1所以,假设我们的设备为iphone6(dpr===2)
第一种情况scale为1,document.documentElement.clientWidth则为375px。
第二种情况scale变为了0.5,document.documentElement.clientWidth则为750px。
因此第一种情况的html的fontSize为50px,第二种情况的html的fontSize为100px。
不知各位看官看到这些数据是否有种云雾缭绕的感觉,不过总结成我们一开始提到的公式,那就万法归一了:
①逻辑像素=物理像素/(dpr*scale) 此时公式里的物理像素概念就是设计稿像素,换个说法而已嘛,呵呵!
所以就有了同一设备(dpr我们无法改变,scale可以自定义)两种情况document.documentElement.clientWidth不同。
②物理像素/100=逻辑像素/html的fontSize html的fontSize=逻辑像素/(设计稿像素/100) =100(逻辑像素/设计稿像素)=100*(dpr*scale),ok下面的大同小异了,收工。
- font-size一般不用rem表示,我们可以采用媒体查询去设置
- 和前者相同,当设备竖着时,物理像素大于1080时,html的font-size就不会变化了,原因也是一样的,分辨率已经可以去访问电脑版页面了。