前端小册

Appearance

On this page

移动端适配 ​

为什么需要适配 ​


屏幕.png

  • 设计稿 375
  • 不同手机不同物理分辨率
  • 不能自适应

尺寸 ​


屏幕尺寸是以屏幕的对角线来计量，单位是英寸

尺寸.png

名称定义单位
像素为组成一幅图像的全部亮度和色度的最小图像单元Pel，pixel;pictureelement
分辨率指纵横向上的像素点数px
设备像素物理分辨率越大，图像缩小p
设备独立像素视网膜屏幕，2x2个像素当1个像素Retina Display
设备像素比物理像素和设备独立像素的比值dpr（device pixel ratio）

屏幕.png屏幕.png ​

1px 边框问题 ​

  • 每个设备的屏幕设备尺寸不一样，就导致每个物理像素渲染出来的大小也不同（设备的像素大小是不固定的）
  • 当我们写 css 中的 1px 时候，由于它是逻辑像素，导致我们的逻辑像素根据这个设备像素比（dpr）去映射到设备上就为 2px，或者 3px。

transform: scale(.5) 方案 ​

css
div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}


css 根据设备像素比媒体查询后的解决方案

css
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

如何适配 ​

viewport ​

  • 视口（viewport）代表当前可见计算机图形区域
  • 你正在浏览文档的那一部分


配置视口

html
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">


含义

属性含义取值
width定义视口的宽度，单位为像素正整数或device-width
heigit定义视口的高度，单位为像素正整数或device-height
initial-scale定义初始缩放值整数或小数
minimum-scale缩小最小比例，必须小于或等于maximum-scale整数或小数
maximum-scale放大最大比例，必须大于或等于minimum-scale整数或小数
user-scalable是否允许用户手动缩放页面yes/no 默认值 yes

规定了我们的视口宽度为屏幕宽带，初始缩放比例为 1，就是初始时候视觉视口就是理想视口

user-scalable 设置为 no 可以解决移动端点击事件延迟问题

rem 适配 ​

  • rem 是 css3 新增的一个相对单位
  • 相对 HTML 根元素设定字体大小
  • em 相对 **父级元素 **设定字体大小
css
html {
	font-size: 20px;
}

/* 相对根元素20px像素 */
span {
	font-size: 1rem;
}

淘宝 flexible ​


淘宝使用的过渡方案，在页面初始时给根元素动态设置一个 font-size，接下来元素根据 rem 来布局

javascript
// set 1rem = viewWidth / 10
function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
}
setRemUnit();


**注意：**用户使用更大的屏幕，是想看到更多的内容，而不是更大的字

vw，vh 布局 ​


vh vw方案：将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分 100 份

px转换成 vw 不一定能完全整除，因此有一定像素差

postcss-px-to-viewport 方案转换

javascript
{
    loader: 'postcss-loader',
    options: {
    	plugins: ()=>[
        	require('autoprefixer')({
        		browsers: ['last 5 versions']
        	}),
        	require('postcss-px-to-viewport')({
        		viewportWidth: 375, // 视口宽度（数字)
        		viewportHeight: 1334, // 视口高度（数字）
        		unitPrecision: 3, // 设置的保留小数位数（数字）
        		viewportUnit: 'vw', // 设置要转换的单位（字符串）
        		selectorBlackList: ['.ignore', '.hairlines'], // 不需要进行转换的类名（数组）
                minPixelValue: 1, // 设置要替换的最小像素值（数字）
                mediaQuery: false // 允许在媒体查询中转换px（true/false）
        	})
    	]
}

适配流程 ​


px 为主，vh，vw 为辅，搭配一些 flex

  • 在 head 设置 width=device-width 的 viewport
  • 在 css 中使用 px
  • 在适当场景中使用 flex 布局，或者配合 vw 进行自适应
  • 在跨设备类型的时候（px < = > 手机 <=>平板） 使用媒体查询
  • 在跨设备类型如果交互差异太大的情况，考虑分开项目开发


参考：
面试官：你了解过移动端适配吗？
移动端适配总结