CSS移动端开发基础（一）：屏幕、像素、视口与适配方案全解析

一、屏幕相关概念1.1 屏幕大小屏幕大小指屏幕的对角线长度单位是英寸inch。常用尺寸说明3.5寸、4.7寸、5.0寸常见手机屏幕尺寸5.5寸、6.0寸、6.5寸大屏手机尺寸换算1英寸inch 2.54厘米cm1.2 屏幕分辨率屏幕分辨率指屏幕在横向、纵向上所拥有的物理像素点总数一般用n × m表示。示例​ iPhone6 的屏幕分辨率为750 × 1334重要说明屏幕分辨率是一个固定值屏幕生产出来就确定了无法修改屏幕分辨率 ≠ 显示分辨率系统设置中可以修改的是显示分辨率设备当前所用到的物理像素点关系屏幕分辨率 ≥ 显示分辨率1.3 各代iPhone屏幕参数一览设备屏幕尺寸逻辑分辨率(point)物理分辨率(pixel)缩放因子PPIiPhone 3GS3.5寸320×480320×4801x163iPhone 43.5寸320×480640×9602x326iPhone 4S3.5寸320×480640×9602x326iPhone 54.0寸320×568640×11362x326iPhone 5S/5C4.0寸320×568640×11362x326iPhone 64.7寸375×667750×13342x326iPhone 6 Plus5.5寸414×7361080×19203x401iPhone 6S4.7寸375×667750×13342x326iPhone 6S Plus5.5寸414×7361080×19203x401iPhone SE4寸320×568640×11362x326iPhone 74.7寸375×667750×13342x326iPhone 7 Plus5.5寸414×7361080×19203x401iPhone 84.7寸375×667750×13342x326iPhone 8 Plus5.5寸414×7361080×19203x402iPhone X5.8寸375×8121125×24363x458iPhone XR6.1寸414×896828×17923x326iPhone XS5.8寸375×8121125×24362x458iPhone XS Max6.5寸414×8961242×26883x458iPhone 115.8寸414×896828×17923x326iPhone 11 Pro6.1寸375×8121125×24362x458iPhone 11 Pro Max6.5寸414×8961242×26883x4581.4 屏幕密度PPIPPIPixels Per Inch屏幕像素密度屏幕上每英寸里包含的物理像素点个数。核心观点PPI值才是真正衡量一块屏幕是否清晰的核心指标。计算公式PPI √(X² Y²) / ZX宽度像素数Y高度像素数Z屏幕大小英寸示例​ iPhone 4S 分辨率为640 × 960屏幕大小为 3.5 英寸PPI √(960² 640²) / 3.5 ≈ 329.65二、像素相关概念2.1 物理像素属性说明别名设备像素本质一个长度单位单位是 px定义屏幕上的一个物理成像点即屏幕中一个微小的发光物理元器件可简单理解为超级微小的灯泡特性屏幕能显示的最小颗粒由屏幕制造商决定生产后无法修改2.2 CSS像素程序员像素属性说明别名逻辑像素本质一个抽象的长度单位单位也是 px定义为Web开发者创造的用来精确度量Web页面上的内容大小使用编写CSS、JS、Less等所使用的都是CSS像素思考代码中的CSS像素跟物理像素的比例在2010年之前1个CSS像素 1个物理像素之后就不一样了。2.3 设备独立像素DIP/DP背景​ 在没有高清屏的年代1个CSS像素对应1个物理像素。但自从高清屏问世二者就不再是1对1的关系了。Retina屏幕​ 2010年苹果公司推出了一种新的显示标准——在屏幕尺寸不变的前提下把更多的物理像素点压缩至一块屏幕里分辨率更高显示效果更细腻。配备这种屏幕的产品是 iPhone 4。设备独立像素的作用​ 使得即使在高清屏下如 Retina 屏也可以让元素有正常的尺寸让代码不受设备影响。设备独立像素由设备厂商根据屏幕特性设置无法更改。设备独立像素与物理像素的关系屏幕类型关系普通屏幕1个设备独立像素 1个物理像素高清屏幕1个设备独立像素 N个物理像素设备独立像素与CSS像素的关系在无法缩放的情况下标准情况下1 CSS像素 1 设备独立像素2.4 像素比DPR定义​ 像素比DPR是单一方向设备物理像素和设备独立像素的比例。DPR 物理像素 / 设备独立像素2.5 像素之间的关系总结在不考虑缩放的情况下理想状态屏幕类型DPR关系普通屏dpr11 CSS像素 1 设备独立像素 1 物理像素2010年之前高清屏dpr21 CSS像素 1 设备独立像素 2 物理像素高清屏dpr31 CSS像素 1 设备独立像素 3 物理像素示例​ 程序员写了一个width: 100px的盒子代表 100 个 CSS像素若用户不进行缩放则对应 100 个设备独立像素在 dpr2 的设备上这 100 个 CSS像素占据了100 × 2 200个物理像素横向以 iPhone6 为例像素类型数值物理像素750px设备独立像素375pxCSS像素375px三、图片高清显示3.1 位图与矢量图类型说明常见格式编辑工具位图​又称点阵图像或栅格图像由n个像素点组成放大后会失真PNG、JPEG/JPG、GIFPS等矢量图​面向对象图片或绘图图像由一系列由线连接的点组成放大后不会失真SVGAI、Sketch等位图像素​ 位图像素是一个长度单位可以理解为位图中的一个小格子是位图的最小单元。3.2 图片分辨率问题图片的分辨率指的是图片在水平垂直方向需要显示多少个物理像素发光小点。示例​ 图片分辨率200 × 200表示图片显示在屏幕中需要用200 × 200的物理像素发光小点问题​ 在移动端 iPhone6 中显示100 × 100px的盒子里面装对应的图片。图片类型图片分辨率对应物理像素对应CSS像素显示效果一倍图100×100100×10050×50模糊被强行放大二倍图200×200200×200100×100清晰结论​ 在移动端如 iPhone6中需要显示多少 px 的图片为了不被强行放大需要使用宽高为2倍分辨率的图片才能显示更好的效果。3.3 多倍图命名规范图片类型命名规范二倍图xxx2x.png三倍图xxx3x.png使用规则如果给的是1倍图那就多大写多大如果是2倍图图片大小 ÷ 2如果是3倍图图片大小 ÷ 3四、视口概念4.1 什么是视口视口Viewport​ 就是浏览器显示页面内容的屏幕区域。4.2 PC端视口在PC端视口的默认宽度和浏览器窗口的宽度一致。在CSS标准文档中PC端视口也被称为初始包含块。4.3 移动端视口移动端视口可以分为三种布局视口、视觉视口、理想视口。布局视口默认的布局视口容器是980px对PC页面进行压缩压到跟手机一样大小就可以看了缺点是元素看上去很小只能手动缩放体验效果不好视觉视口视觉视口是用户可见的区域它的绝对宽度永远和设备屏幕一样宽但这个宽度里包含的CSS像素值是变化的例如一般手机将 980 个CSS像素放入视觉视口中注意​ 布局视口经过压缩后横向的宽度用CSS像素表达就不再是 375px而是 980px。描述iPhone6屏幕像素类型数值物理像素750px设备独立像素375pxCSS像素980px理想视口定义​ 与屏幕设备独立像素等宽的布局视口称之为理想视口。作用​ 让布局视口宽度与屏幕等宽设备独立像素靠 meta 标签实现。用户不需要缩放、滚动就能看到网站的全部内容。要求​ 要为移动端设备单独设计一个移动端网站。开启理想视口的方法meta nameviewport contentwidthdevice-width /五、meta标签设置5.1 完美视口配置meta nameviewport content widthdevice-width, initial-scale1.0, user-scalableno, maximum-scale1.0, minimum-scale1.0/5.2 参数说明参数说明widthdevice-width视口宽度和设备保持一致initial-scale1.0页面的初始缩放值屏幕宽度÷布局视口宽度user-scalableno是否允许用户缩放maximum-scale1.0最大允许缩放比例minimum-scale1.0最小允许缩放比例六、移动端开发选择6.1 移动端主流适配方案方案一单独制作移动端页面主流为了在特定设备上显示最好的视觉效果大多移动端产品都有PC端和移动端两套不同的网站。技术实现​ 服务器根据浏览器请求的User-Agent判断设备类型然后返回或重定向对应的站点内容。代表案例​ 京东商城、淘宝网、苏宁易购等技术栈​remflexible.js方案二响应式页面兼容移动端其次技术实现​ 媒体查询代表案例​ Bootstrap站点、三星手机官网、星巴克官网特点​ 通过判断屏幕宽度来改变样式以适应不同终端缺点​ 制作麻烦需要花费很大精力去调兼容性问题只适用于内容简单、要求不高的官网6.2 响应式设计原则面试题原则说明渐进增强​基本需求 → 更好体验优雅降级​完备功能 → 向下兼容注意​ 移动优先的响应式布局采用的是渐进增强原则。6.3 移动端开发注意事项/* 1. 去除默认样式 */ /* 推荐使用 normalize.css保留有用默认样式或 reset.css全部清除 */ /* 2. 盒子模型 */ box-sizing: border-box; /* 3. 去除超链接点击高亮背景效果 */ -webkit-tap-highlight-color: transparent;七、总结本文详细介绍了移动端开发的基础概念屏幕相关屏幕大小、分辨率、PPI的计算和意义像素相关物理像素、CSS像素、设备独立像素、像素比DPR的关系图片高清显示位图与矢量图的区别、多倍图的使用视口概念布局视口、视觉视口、理想视口的区别meta标签完美视口的配置参数开发选择单独移动端页面 vs 响应式页面的优缺点掌握这些基础知识后你将能够更好地理解移动端开发的底层原理为后续的移动端适配打下坚实基础。