移动端响应式设计笔记

5、Media（媒体查询器）、@media

Media（媒体查询器），是响应式设计的核心CSS技术

所有参数汇总：

• width：浏览器可视宽度。

• height：浏览器可视高度。

• device-width：设备屏幕的宽度。（例如："width=device-width"）

• device-height：设备屏幕的高度。

• orientation：检测设备目前处于横向还是纵向状态。

• aspect-ratio：检测浏览器可视宽度和高度的比例。(例如：aspect-ratio: 16/9)

• device-aspect-ratio：检测设备的宽度和高度的比例。

• color:检测颜色的位数。（例如：min-color: 32就会检测设备是否拥有32位颜色）

• color-index：检查设备颜色索引表中的颜色，值不能是负数。

• resolution：检测屏幕或打印机的分辨率。(例如：min-resolution: 300dpi或min-resolution: 118dpcm)

• grid：检测输出的设备是网格的还是位图设备。

• monochrome：检测单色楨缓冲区域中的每个像素的位数。（这个太高级，也很少会用到）

---

首先，我们要使用Media需要先在html页面添加如下代码来兼容移动设备的展示效果

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

参数解析：

①width=device-width：宽度等于当前设备的宽度

②initial-scale=1.0：初始缩放比例默认为1.0

🌂minimum-scale：允许用户缩放到的最小比例（默认设置为1.0），maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）  

④user-scalable：用户是否可以手动缩放，一般不希望用户放大缩小页面

 

其次，需要加载兼容文件，因为IE8既不支持HTML5也不支持CSS3 Media，加载两个js文件保证能实现兼容效果

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

 

最后，我们可以在css文件里面使用@media来进行响应式编程

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

代码解析：

max-width: 960px：当页面小于960px的时候执行以下css样式代码

screen：告知设备在打印页面时使用衬线字体，在屏幕上显示无衬线字体，目前很多网站会直接省略该值，因为很少需要用户打印

所以往往为

@media (max-width: 960px){
    body{
        background: #000;
    }
}

 

拓展：

1、实现等于960px尺寸、大于或者大于小于

/* 等于960px*/
@media (max-device-width:960px){
    body{
        background:red;
    }
}

/* 大于960px */
@media (min-width:960px){
    body{
        background:black;
    }
}

/* 混合使用：当页面宽度大于960px并且小于1200px时执行 */
@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

 

2、导航栏变侧边栏

3、多列变单列

---

 

 2、淘宝flexible

问题：

如何使用Flexible实现手机淘宝H5页面的终端适配

解决：

手机淘宝的flexible的设计和实现

---

 

手机淘宝，从2014年中开始全面推行flexible设计。flexible是responsive响应式设计的低端形态和基础。

最直观感受就是，在超宽屏幕上，网页显示不会两边留白。

以前的PC时代的流体布局，其实就是一种flexible design，只不过，流体的表述角度是实现，flexible的表述角度是结果。

 

首先，需要了解三个关键概念

ppi，pixel per inch，每英寸像素数	显示世界每英寸的像素数，决定了屏幕的显示质量
dpr，device pixel ratio，设备像素比率	物理像素与逻辑像素px的对应关系
resolution，分辨率	屏幕区域的宽高所占像素数

场景一：resolution，分辨率适配

问题：

一张banner图片，当你面对不同的屏幕时，会出现什么行为？而你希望它的行为是什么？

分析：

我们需要考虑到，多数网页都是纵向滚动，在不同的屏幕尺寸下，banner图片的行为应该是铺满屏幕宽度以及保持宽高比（放大缩小时把持比例）

解决：

使用百分比宽度，即width: 100%；

接着，需要固定宽高比，我们有两种思路来实现：一是利用img标签的特性，只设置宽度，等图片加载完，这种方法会导致大量的重排，并且非固定高度会导致懒加载等功能难以实现，所以果断放弃；二是使用before伪元素的margin撑开高度，这种方法是比较干净的纯css实现，但是不具备任何复用性而且要求特定html结构，所以同样放弃。

所以，剩下最适合的方法：使用相对单位，rem，使用js给html设置一个跟屏幕宽度成正比的font-size，然后把元素高度都以rem作为单位

 

遗留问题：

占用了rem单位、不是纯css方案

 

场景二：ppi适配

问题：

一段文字，当针对不同的屏幕，会是怎样的行为？你希望它的行为是什么？

分析：

我们一般希望在不同手机上看到的文字尺寸是相同的，即不希望文字在Retina屏尺寸变小，而希望在大屏上看到更多文字；

另外现在绝大多数字体都是自带点阵尺寸，通常为16px和24px，我们不希望出现13px或者15px这样的奇葩尺寸；

所以，字体不适合使用rem（在我们的希望前提下），而应该使用px

解决：

考虑到Retina，我们利用media query来指定不同的字体；考虑到dpr判定的兼容性，我们用宽度替换来代替

.a {
    font-size:12px
}
@media (min-width: 401px){
    .a {
        font-size:24px
    }

备注：

有一些标题性文字，我们希望随着屏幕宽而增大的，所以我们仍然使用rem作为单位。

一般超过35px（个人直观感受）的文字，已经不用太考虑点阵信息了，靠字体的矢量信息也能渲染的很好。

 

场景三：dpr匹配

设备像素比率，物理像素和逻辑像素px的对应关系

问题：

一个区块，设计稿上有1像素边框，当针对不同的屏幕会出现什么行为？你希望它是什么行为？

分析：

一般情况下我们希望在任何屏幕上这条线仍然是1物理像素

解决：

因为这类问题不是使用px就能解决的，比如，在Retina屏下，假如你写了viewport的设置，

你将永远无法写出1px宽度的东西，另外，inline的SVG等元素，也会按照逻辑像素来渲染，导致整个页面的清洗度会大打折扣。

所以，手机淘宝用JavaScript来动态写meta标签

var metaEl = doc.createElement('meta');
var scale = isRetina ? 0.5:1;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
    document.documentElement.firstElementChild.appendChild(metaEl);
} else {
    var wrap = doc.createElement('div');
    wrap.appendChild(metaEl);
    documen.write(wrap.innerHTML);
}

 

结语

手机淘宝的flexible方案，其实就是综合使用rem和px两种单位——JavaScript设置scale和html字体的

 

3、百分比

①rem

②rpx(微信小程序)

🌂%

 

4、flex

flex布局（微信小程序）

<view class="flex-wrp" style="flex-direction: row;">

　　<view class="flex-item"></view>

</view>