一 . meta标签的设置
1.<!--元标签引入外部的资源->
<!--视口设置视口可以保持pc端和移动端的比例1:1的-->
二、移动端的两种方法
web中常用的单位
-px像素
- em相对于父级元素进行计算
- deg角度值
- %宽高自适应
-pt磅
2.移动端中非常重要的单位:
方法-:
rem相对单位,相对于根元素(html)的font-size进行计算的
移动端的思路
-移动端的单位需要使用rem(是相对于html计算)
-元素盒子大小是2rem切换移动端根据每个移动端的htm进行计算
-想办法改变每一个html 下面的font-size的值(媒体查询)
计算公式：设备像素比=物理像素/逻辑像素
-设备像素比简称为dpr
-物理像素: ui设计图的大小(已知)
-逻辑像素:前端需要设置的css样式的值
=>逻辑像素=物理像素1 dpr
常见的设计图(在工作中设计图有640px、750px是最常见的、1080px)
640px dpr为2
750px dpr为2
1080px dpr考虑为3
重要并且要记住的总结:
-设计图最常见的就是750px,dpr为2
-计算公式:逻辑像素=物理像素1 dpr
移动端1px不用转换为rem
在高清显示屏中1px会显示2px的宽度? -真机测试bug
- 1px => 0.5px
- css3缩放属性
方法二:
vw + rem相对于视口的单位
- 1vw =当前浏览器窗口的百分之一
- 100vw = 100%的宽度
-没有滚动条的时候,两者是相等的
- 滚动条是占位置, 100%的宽度是不包含滚动条的两者是不相等的(vw建议在移动端使用)
推算思路:
-在移动端中100vw相当于沾满整个浏览器
-拿到u设计图1vw等于设计图的百分之一
100ww/设计图的大小=每-份的大小
-量出设计图的某个盒子元素
1. 常见的设计图宽度为640px,dpr为2
- 640px/2 = 320px
- 320px = 100vw
- 1vw= 3.2px
. 1px = 0.3125vw
2. 常见的设计图宽度为750px,dpr为2
- 750px/2 = 375px
- 375px = 100vw
- 1vw = 3.75px
. 1px = 0.2667vw
计算公式:
-当设计图宽度为640pxhtml{font-size:0.3125vw}
-当设计图宽度为750pxhtml{font-size:0.2667vw}
-导航(100%*88px) => vw
-导航的高度:88px/2 = 44rem
总结:
-当设计图宽度为640px html{font-size:0.3125vw}
-当设计图宽度为750px html{font-size:0.2667vw}
-物理像素/dpr=?rem
