移动端布局

绝大部分项目:
PC端 ~~> 官网
移动端 ~~> 移动端网页,app,小程序…

响应式布局:
为了适应不同的设备,分辨率
不同的设备(pc电脑端 平板电脑 手机端)

x 宽度

500px<= x <800px css 1
800px<= x <1000px css 2
1000px<= x <1500px css 3

响应式的优势:
1: 一套项目,能适应不同的设备,灵活
2: 能够快捷解决多设备显示适应问题
3: 从显示上来看: 用户体验会更好一点

响应式的缺点:
1: 繁琐,代码量大,会出现隐藏无用的元素,加载时间加长
2: 开发成本偏高(不同的项目组)
开发一套产品不能满足要求一套图也不能满足要求(移动端 pc端的)
前端布局: 一套布局方案是不能满足数据: pc 移动端
3: 兼容不同的设备,兼容性工作量加大,效率低下
4: 这是一个折中的解决方案,多方面的因素影响达不到最佳的效果
5: 会出现用户混淆

为什么讲响应式:
利用响应式的思想,做移动端项目的适配
视口:
就是浏览器显示页面内容的屏幕区域
视口分为: 布局视口 视觉视口 理想视口
布局视口:
一般移动端设备的浏览器都默认设置了一个布局视口,为了解决早期pc端页面在移动端上的显示问题
苹果 安卓 基本上设置这个视口的分辨率980px
视觉视口:
你看到的网页区域,指的是网址的区域通过缩放去操作视觉视口不会影响布局视口

理想视口:
1: 是网站在移动设备的浏览器中最理想的一状态(浏览和阅读宽度设定的)
2: 对设备来说就是最理想的尺寸
3: 引入一个meta标签,通知浏览器进行对应的操作
4: meta标签的主要目的就是为了使布局视口的宽度应该与理想窗口的宽度一致,就是设备有多宽,布局视口就有多宽

width=device-width 当前的宽度与当前设备的宽度一致
initial-scale=1 初始的缩放比例(默认为1)
minimum-scale=1 允许用户缩放到的最小比例(默认为1)
maximum-scale=1 允许用户缩放到的最大比例(默认为1)
user-scalable=no 用户是否可以手动缩放(默认不允许) 因为我们不希望用户去放大缩小页面
注意: 移动端必须写meta标签,且是禁止用户缩放
视口缩放:

在375px的设备中截图出来 到ps 中测量是750px
在ps中值比 设备中的px值大一倍

物理像素:
1:指的就是屏幕像是的最小的点,是真实存在,设备厂商在生产设备是就已经固定好了的,比如苹果678 750*1334

2: 视网膜高清显示屏,retina显示屏,作用是把更多的物理像素点压缩至一块屏幕里,像素点越密集,看得越清晰,达到更高的分辨,提高画质

了解: ppi: 每英寸所显示的像素点的密度
dpi: 每英寸所显示的像素点的点数

重点:
物理像素比: dpr = 物理像素 / 逻辑像素
物理像素:就是设备所显示的像素(手机截图 在ps中量取出来的像素大小)
逻辑像素: 页面在css中书写的像素

常见的设计稿:
设计图 640px dpr 2 320
750px dpr 2 375
1125px dpr 3

常见的单位:
px
em
pt(磅) 更多应用于安卓设置
deg 角度
%

rem: 跟随html的font-size:;值的大小
默认状态下 1rem = 16px

vw: 视口的宽度 width:100vw; 占满整个视口的宽度
能够随着视口的宽度变化而变化
100vw = 满屏 = 320px
100vw = 满屏 = 375px

vh: 视口的高度 height:100vh; 占满整个视口的高度
能够随着视口的高度变化而变化

vmin: 作比较, 窗口的宽高谁小,谁小就按照谁显示
vmax: 作比较, 窗口宽高谁大,谁大就按照谁显示

使用vw是为了让元素的大小能受到屏幕大小的变化而控制
让整体使用rem的单位,跟随html中font-size的设置

640设计图:
100vw = 满屏 = 320px
1vw = 3.2px
?vw = 100px
100/3.2 = 31.25vw
得出 31.25vw = 100px

750设计图
100vw = 满屏 = 375px
100vw = 375px
1vw = 3.75px
?vw = 100px
100/3.75 26.66666666…
得出 26.67 = 100px

假设 1rem = 120px
1vw = 3.75px
?vw = 120px
120/3.75= 32vw
得出 32vw = 120px

记住:
如果使用vw + rem实现页面布局适配
设计图是750px html{font-size:26.67vw;}
设计图是640px html{font-size:31.25vw;}