移动端适配

Contents

1. 1. 关于像素
2. 2. 关于meta viewport
3. 3. 首先，准备工作。
4. 4. 如何实现移动端适配？
   1. 4.1. 1. 通过媒体查询的方式即CSS3的meida queries
   2. 4.2. 2. rem缩放

关于像素

• css中的1px并不等于设备的1px
• 显示器上的物理像素等于显示器的点距
• css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。

关于meta viewport

• 两种viewport：layout viewport 和 visual viewport
  
• visual viewport可以类比为移动设备屏幕的大小范围，而layout viewport要大很多。
• 移动设备上的浏览器大多都会把自己默认的layout viewport设为980px，用户的设备很小，这样带来的后果就是浏览器会出现横向滚动条。（这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取）
• 通过这个默认的layout viewport，所有pc的网页在手机上都可以浏览啦，只不过非常难用，用户要不断的滑动页面才能看到整个网页。
• 很明显，这不是我们想要的移动端网页。所以，越来越多的网站都会为移动设备进行单独的设计，那怎么样设计移动设备的页面呢？

首先，准备工作。

修改默认的layout viewport，告别乱划乱放大的浏览方式。

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

• content=”width=device-width： 让layout viewport等于设备的理想宽度
• 查看各机型的理想viewport宽度
• user-scalable=no：禁止用户进行缩放
• initial-scale=1.0：设置页面的初始缩放值为1
• maximum-scale=1.0：允许用户的最大缩放值为1
• minimum-scale=1.0：允许用户的最小缩放值为1
• 这个标签是移动端适配的前提，禁止浏览器缩放网页，也禁止用户缩放网页，为什么禁止呢，因为我们会给移动端写一个完美的展示效果，根本不需要缩放！

如何实现移动端适配？

有两种常用的适配方案：

1. 通过媒体查询的方式即CSS3的meida queries

• 它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
    /* css代码*/
}

• 优点

1. media query可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候。
2. 图片便于修改，只需修改css文件
3. 调整屏幕宽度的时候不用刷新页面即可响应式展示

• 缺点

1. 代码量比较大，维护不方便
2. 为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
3. 为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

2. rem缩放

• 根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。
• 使用js动态调整rem

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
  var pageWidth = window.innerWidth
  document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>')
</script>

• 在 scss 文件里添加，这个方法可实现 px 自动变 rem

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}
$designWidth : 750;  
.child{
  width: px(375);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}