移动端是怎么做适配的

1、设置理想窗口meta viewport
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

一般我们在编辑器里输入meta:vp按下tab就可以自动补全这些

width=device-width这句代码可以把布局视口设置成为浏览器（屏幕）的宽度。

initial-scale=1的意思是初始缩放的比例是1，使用它的时候，同时也会将布局视口的尺寸设置为缩放后的尺寸。而缩放的尺寸就是基于屏幕的宽度来的，也就起到了和width=device-width同样的效果。
设置理想视口，使得DOM宽度(layout viewport)与屏幕宽度(visual viewport)一样大,DOM文档主宽度即为屏幕宽度
要注意的是：1个CSS像素(1px)由多少设备像素显示由具体设备而不同。

<meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2、媒体查询
使用@media 查询，可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面，@media 是非常有用的。
当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
媒体查询的结果可以用css文件代替
语法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

也可以针对不同的媒体使用不同 stylesheets (媒体类型是可选的，默认值是all):

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

实例：如果设备的分辨率在800px一下，则这些CSS文件生效。

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 800px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

3、动态rem方案(手机专用自适应方案)

rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位，即根据网页的根元素（html）来设置字体的大小。

实现动态rem,主要需要下面两步：
1.使用 JS 动态调整 REM

      <script>
        var pageWidth = window.innerWidth
         document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
      </script>

2.使用sass自动将设计稿的px转换为rem
在scss文件里写这样一个函数：

    @function px( $px ){
    @return $px/$designWidth*10 + rem;
    }

    $designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。设计师的设计稿宽度需要统一

补充知识：

1.设备像素（device pixel）：设备能控制显示的最小物理单位，显示器上一个个的点。大小固定，不可变。其实就是常说相对屏幕的分辨率。比如iPhone6的1334750px。

2.设备独立像素（dip/dp：device-independent pixel）：计算机坐标系统中的一个点，该点代表一个可由程序使用并控制的虚拟像素，当设备像素比等于1的时候。它在数值上与css数值是相等的。比如iPhone6的375667px。

3.设备像素比(device pixel ratio)：通过window.devicePixelRatio获取。设备像素比DPR = 设备像素/ 设备独立像素。iPhone4及以上的像素比不是1，这就影响了用几个设备像素去展示1个CSS像素了。

4.CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位。

5.initial-scale定义视口的缩放比例，1 css pixel 等于1 viewport pixel 。当改变initial-scale的大小时，即缩放网页，相应的，设备像素也响应的改变。

6.document.documentElement.clientWidth代表文档的宽度。文档的宽度是由css控制的。

7.window.screen.width获取的值是设备独立像素。不论是PC端还是移动端，window.screen.width获取的值是设备独立像素。比如iPhone6的375*667px。

8.window.innerWidth获取的是浏览器视口（viewport）宽度

移动端是怎么做适配的

猜你喜欢