移动端适配

原创于 2021-02-18 16:21:27 发布 · 256 阅读

CC 4.0 BY-SA版权

本文详细介绍了rem单位、媒体查询以及less在响应式布局中的应用。通过媒体查询划分屏幕档位，设置不同档位下的html字体大小，结合rem单位实现元素的等比缩放。同时，利用less简化CSS代码，通过变量、嵌套和运算提高编写效率。此外，还探讨了flexible.js库如何动态调整rem，实现更为平滑的适配效果。两种解决方案各有特点，媒体查询+less适用于阶梯式变化，而flexible.js则提供连续变化的适配体验。

一、媒体查询

感受到屏幕的变化；可以根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示；

1.CSS3 新语法，是一个查询屏幕的过程，通过查询当前屏幕尺寸属于哪个范围，从而有哪个范围的样式生效；
2.感受屏幕变化，屏幕变化就是宽度的变化，通过预设置，当屏幕到了我已经预设置的变化的范围，就会把我提前设置好的样式进行生效；

1.1 语法

CSS样式：

/*
mediatype 查询类型: 
----------------- 
all 所有设备 
print 用于打印机和打印预览 
screen 用于电脑屏幕，平板电脑，智能手机等。 
条件: 
---- 
and 并且 not 不满足 only 仅仅满足 
media feature 查询条件: 
---------------------- 
width,min-with,max-width */
@media mediatype and|not|only (media feature) { 
	CSS-Code; 
}

引用资源：(了解)

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

举例：

适配需求：

档位1：w<320 px w <= 319 px;

档位2: w>=320px and w< 640px;

档位3: w>=640px

举例：

适配需求： 

档位1：w<320 px w <= 319 px; 

档位2: w>=320px and w< 640px; 

档位3: w>=640px

二、rem

2.1 原理：

rem是一个相对单位，类似于em，
不同的是rem的基准是相对于html元素的字体大小，em是父元素字体大小。

2.2 作用：

让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

2.3 方案：

使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

2.4 用法:

rem单位，可以控制整个页面所有元素有关PX类；（宽、高、padding、margin、top…）只要是你设置数值的地方都可以实现控制；
root: 1rem代表HTML的font-size大小；

2.5 语法:

/* 1.根html 为 10px */ 
html { 
	font-size: 10px; 
}
 
/* 2.此时 div 的宽就是 150px */ 
div {
	width: 15rem; 
}

举例：举例展示缩放效果

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* rem语法 在哪里设置 设置什么 */
        /* rem是个单位  现在 1rem就是10px  */
        html {
            font-size: 10px;
        }
 
        div {
            width: 15rem;
            height: 15rem;
            background: #000;
        }
    </style>
</head>
 
<body>
    <div></div>
</body>
 
</html>

三、rem应用

rem布局的核心：rem+媒体查询；

媒体查询：把屏幕划分不同档位，等待变化；

布局所有单位用rem，当 HTML字体大小发生改变，使用rem单位元素都会发生改变；
rem+媒体查询加在一起：划分屏幕，等待变化；变化谁？变化唯一控制 rem（HTML字体大小）

@media screen and (min-width: 320px) { 
	html { 
		font-size: 20px; 
	} 
}
@media screen and (min-width: 640px) { 
	html { 
		font-size: 40px; 
	} 
}
div { 
	width:1rem; 
	height:1rem; 
}

举例：实现不同尺寸，元素的缩放效果

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (min-width: 320px) {
            html {
                font-size: 20px;
            }
        }
 
        @media screen and (min-width: 640px) {
            html {
                font-size: 40px;
            }
        }
 
        div {
            width: 1rem;
            height: 1rem;
            background: #000;
        }
    </style>
</head>
 
<body>
    <div></div>
</body>
 
</html>

rem布局核心总结：

媒体查询：屏幕到达不同的范围下，HTML的font-size大小会有不同的取值;
1rem 背后的代表的px值 = 当前档位 HTML 字体大小所代表的大小
那么使用rem单位的元素就会发生等比的变化；

四、实际应用

4.1 UI设计稿 :

尺寸不同，页面在不同的尺寸下要等比缩放

在这里插入图片描述
档位划分：min-width 最小界值；

约定：把UI各种设计稿，从小到大，当前我们档位划分开始点，起始点；

4.2 1rem背后代表的值 :

在这里，我们约定设置HTML的字体大小：按照每个档位的最小界值，都划分相同的份数，得到当前档位的 HTML的font-size大小；

// 我们此次定义的划分的份数 为 10 这个过程在计算 1个rem 在不同档位下是多大； 
@media screen and (min-width: 320px) { 
    html {
        font-size: 32px; 
    } 
}
@media screen and (min-width: 360px) { 
    html {
        font-size: 36px; 
    } 
}
@media screen and (min-width: 540px) { 
    html {
        font-size: 54px; 
    } 
}

4.3 具体如何做？

档位和根基设置按照约定设置好了；

UI给的图的已经拿到了，上面标注的是px单位；

目标：把px单位换算成rem单位；

如何做：选择当前设计稿在档位下的rem背后代表的值进行计算；

如果给你的540px宽度设计稿怎么换算rem，宽度=540px = 540/54 rem；

五、less应用

less : 让你写更少的代码，实现相同的效果；

less :是一门 CSS 扩展语言，它扩展了CSS的动态特性。 CSS 预处理言语。

常见的CSS预处理器：Sass、Less、Stylus 。

Less中文网址：http://lesscss.cn/

5.1 安装

vscode插件安装：

搜索 Easy LESS
安装完毕插件，重新加载下 vscode。
测试：保存一下 .less 文件，会自动生成 .css 文件

在这里插入图片描述

5.2 变量

变量是指没有固定的值，可以改变的。

我们CSS中的一些颜色和数值等经常使用，可以设置为变量；

语法：

//@变量名:值; 
@bg:#333; 
.box_1 { 
	background-color: @bg; 
}
.box_2 { 
	background-color: @bg; 
}

命名规则:

必须有@为前缀
不能包含特殊字符~=+、不能以数字开头
大小写敏感区分; .

5.3 嵌套

类似HTML一样写less结构；

语法：

/* css 写法 */ 
#header .logo { 
    width: 300px; 
}
/* less 写法 */ 
#header { 
    .logo { 
        width: 300px; 
    } 
}

交集|伪类|伪元素选择器，语法

/* css写法 */ 
a:hover{ 
    color:red; 
}
/* less写法 */ 
a{
    &:hover{ 
        color:red; 
    } 
}

5.4 运算

任何数字、颜色或者变量都可以参与运算。

Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

语法：

// 数字 
width: 200px - 50; 
// 颜色 
background-color: #666 - #222; 
// 注意：运算符中间左右有个空格隔开 1px * 5

单位选择：

如果两个值之间只有一个值有单位，则运算结果就取该单位
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位

六、解决方案

6.1 方案1 ：rem+媒体查询+less 方案

750px 操作过程：

第一步：

原稿实现：先拿到设计稿:750px ; 页面上所有的元素，在750px设计稿上进行测量，代码实现；

第二步：

准备各个档位下的rem ：提前准备好各个档位下的HTML 的font-size大小；
拿到当前尺寸的rem：因为我现在是750px的设计稿，所以可以得到750px这个尺寸属于的档位下的 HTML 的font-size大小，也就是750px设计稿下的1rem值。
计算比例：把页面刚才所有的元素的PX值替换为 rem
达到目标：那么，屏变化时，1rem(基础块)也会变化，自然就是等比缩放；

6.2 方案2（推荐!!!）：rem+flexible.js+less

和上个方案实现原理一样，都是通过改变1rem(基础块)大小实现页面整体元素改变；

6.2.1 flexible.js 简介：

手机淘宝团队出的简洁高效移动端适配库；和flex布局没有任何关系

github地址：https://github.com/amfe/lib-flexible

不是通过设置CSS媒体查询设置font-size，通过 JS 设置font-size，效果是屏幕变化一点，就有一个rem重新计算；

6.2.2 1rem背后代表的值

划分10份；
设置在HTML标签上；

function setRem () { 
// docEl.clientWidth JS获取当前屏幕的宽度 
// 除以10,得到基础块 
    var rem = docEl.clientWidth / 10; 
    docEl.style.fontSize = rem + 'px' 
}

6.2.3 步骤！！！

假如设计稿430px

拿到UI设计稿，原稿实现；页面上所有的元素，在设计稿上进行测量，代码实现；（流式、flex）只要是UI给图上有标注，就是写出来；先全部实现出来，一会统一替换；

在哪里写？less文件
需要把生成的css文件进行引入index.html；
设计稿宽度/10 ：1rem=43px；

统一替换：100px=100/43rem;

6.2.4 举例

06.less

div {
    width: 100/43rem;
    height: 100/43rem;
    background: #000;
}

flexible.js

(function flexible(window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1
 
  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    } else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();
 
 
  // 750 100px 100rem / 75 
  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }
 
  setRemUnit()
 
  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function(e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
 
  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

demo.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./flexible.js"></script>
    <link rel="stylesheet" href="./06.css">
</head>
 
<body>
    <div></div>
</body>
 
</html>