移动端，DPR，物理像素，逻辑像素，视口，布局视口，视觉视口，理想视口，移动端布局方案，开发常用单位，等比缩放，rem布局，grid网格布局
目录
移动端
一，移动端相关概念
- 移动端概念：可以移动的设备称之为移动端，一般指手机，平板，手表等。
- 我们开发时主要考虑的是手机界面，app
- 移动端查看模拟器功能
二，移动端手机像素
《1》物理像素
设备出厂时的屏幕像素点
《2》逻辑像素/CSS像素
CSS样式表中使用的像素就叫逻辑像素
《3》设备像素比/DPR
设备像素比=物理像素/CSS像素
三，视口
《1》布局视口:
布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度，布局视口的默认宽度有可能是768px、980px或1024px等。
1，浏览器设置布局视口的原因：
有些网站是没有对移动端进行开发的，为了能够让用户观看，设置了布局视口，但是布局视口只是能看，并不能给用户最佳的观看体验。
《2》视觉视口:
是指用户看到的区域，及屏幕窗口的大小
《3》理想视口:
理想视口是指对设备来讲最理想的视口尺寸，能够给用户最佳的移动端观看体验
设置理想视口代码如下：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
四，移动端布局（PX固定布局）
《1》设置理想视口
《2》*{margin:0; padding:0;}
body{display :flex;
flex-direction: column; }
中间模块{flex :1;
overflow-y : auto; }
《3》设计图量出来，根据设计图的设备像素比，计算出来我们要使用的CSS像素进行开发
缺点：
只能在出具设计图的机型上才能适配，无法适配其他机型。
五，其他的移动端布局方案
《1》可切换的固定布局
同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；
总结：
响应式布局的理念，有部分网页时这么做的
《2》弹性布局/百分比布局（常用）
比百分比作为页面的基本带我，多使用弹性盒布局，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。
《3》等比缩放布局/rem布局
使用rem作为移动端开发的基本单位，可以实现页面随着屏幕大小变化而等比缩放
《4》混合布局
弹性盒盒等比缩放布局综合使用。
最低0.47元/天 解锁文章
1901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
