移动端 -- 视口,像素,响应式布局,rem
一. 为什么使用移动端适配?
1.随着时代的发展,在移动端上访问pc端的页面,逐渐变的常态化
2.手机的设备尺寸, 碎片化( 种类繁多,五花八门)越来越严重
二. 移动端测试方式
1.谷歌浏览器 提供的 虚拟机
2.电脑和手机在同一局域网内,扫描编译器提供的二维码,即可在手机上查看
3.搭建本地服务器,来建立访问
三. 视口
三种视口:布局视口,视觉视口 和 理想视口
1. 布局视口
布局视口一般都是浏览器厂商给的一个固定值,布局视口是看不见的,浏览器厂商设置的一个固定值,如980px,并将980px的内容缩放到手机屏内。
2. 视觉视口
浏览器可视区域的大小,也就是用户可以通过设备宽度看到的内容
3. 理想视口
布局视口虽然解决了移动端查看pc端网页的问题,但是完全忽略了手机本身的尺寸。
所以苹果引入了理想视口,它对设备来说是最理想的布局视口,
用户不需要对页面进行缩放就能完美的显示整个页面。
最简单的做法就是使布局视口宽度改成屏幕的宽度。
四. 像素
两个像素和一个像素比
1)css像素(独立像素,逻辑像素) : 在CSS、JS中使用的一个长度单位。单位px
注:在pc端1物理像素等于1px,但是移动端1物理像素不一定等于1px
2)物理像素:屏幕的物理像素,又被称为设备像素,他是显示设备中一个最微小的物理部件。
任何设备屏幕的物理像素出厂时就确定了,且固定不变的
设备像素比: 简称为dpr, 它是物理像素和独立像素的对应关系(也就是比例)
备注:判断是否为高清时, 看一下dpr的值是否大于1。 一般情况下dpr为整数,
五. meta标签
告诉浏览器一些设置信息,是设置理想视口的重要元素,主要用于将布局视口的尺寸和理想视口的尺寸相匹配
五个指令:
1.width
设置布局视口的宽度,一般为device-width
2.initial-scale
初始缩放比例
3.maximum-scale
最大缩放比例
4.minimum-scale
最小缩放比例
5.user-scalable
是否允许用户缩放
代码:
六. 移动端开发
6.1. 移动端开发的两种主流方案之一: 响应式布局兼容
响应式布局:用于解决不同浏览器,不同分辨率以及不同设备的不同显示效果
1.内容没有受到明显影响时,自适应宽高即可
2.内容受到明显的影响时,改变布局,来保证内容的清晰
优点:1.面对不同分辨率的设备灵活性很强
2.能够快捷的解决多设备显示适应的问题
缺点:1.兼容各种设备,工作量大,效率低,页面加载时间长
2.一定程度上,会改变网站原有的布局结构,可能会出现用户混淆问题
6.2. 主流方案之二: 单独制作移动端的页面
@media
声明关键字
screen
设备类型
and
关键字(连接,指定)
()
媒体特性(屏幕尺寸)
{}
指定的样式
当screen的屏幕尺寸符合指定尺寸时,执行指定的样式
max-width: 屏幕小于等于指定尺寸时触发(最多)
min-width: 屏幕大于等于指定尺寸时触发(最小)
七. rem和em
7.1 em 是一个相对的距离单位
参考父级的font-size:1em == 父级的 1 *font-size
备注:em 通过自身父级的字体大小, 会转换为px
公式: 实际px == 1em * 父级的字体大小
优点: 方便我们设置段落间隙
缺点:当嵌套多层的时候,需要自己去计算
7.2 rem
和em基本类似,区别点在于: em相对自身父级的字体, rem只相对html的字体大小
rem: root-em 根元素的em值, html的字体大小
rem计算公式:
1)屏幕的宽度(设计稿 通常是750) / 份数(20) = html的字体大小(1rem的大小)
2)元素的尺寸 / 1rem的值 = 实际的rem值(要写在元素样式上的值)
onresize
屏幕尺寸发生变化时触发
获取屏幕宽度:document.documentElement.clientWidth/document.body.clientWidth
一些浏览器无法获取documentElement,所以去获取body