前端媒体查询适配

目前在空闲时间随便播写了个网站，想要做成响应式的类型，顺便过下适配方面的知识点。

什么是viewport?

适配在手机上，首先要理解viewport viewport 是用户网页的可视区域。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

常用的适配代码：定义页面宽度等于设备宽度，默认缩放比例为1.0，禁止用户手动缩放页面

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
复制代码

还有其他属性

属性	解释
width	控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height	和 width 相对应，指定高度。
initial-scale	初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale	允许用户缩放到的最大比例。
minimum-scale	允许用户缩放到的最小比例。
user-scalable	用户是否可以手动缩放

常用屏幕分辨率

以下的屏幕分辨率应该可以兼容百分之90的屏幕了

@media (min-width: 320px)
@media (min-width: 360px)
@media (min-width: 375px)
@media (min-width: 386px)
@media (min-width: 393px)
@media (min-width: 401px)
@media (min-width: 750px)
@media (min-width: 1024px)
@media (min-width: 1100px)
@media (min-width: 1280px)
@media (min-width: 1366px) 
@media (min-width: 1440px)
@media (min-width: 1680px)
@media (min-width: 1920px) 
复制代码

stylus的适配方案

最近在做一个官网，正好看下stylus这个css预处理器，对与屏幕适配我认为很棒了，而且相对来说比较简单。

首先定义变量

定义变量：
@media (min-width: 750px)
  $fontSize = 12px
@media (min-width: 1024px)
  $fontSize = 16px
使用：
.header
  font-size $fontSize
复制代码

如此，header的字体大小就可以根据屏幕分辨率不同进行变化。 未完待续。。。

转载于:https://juejin.im/post/5bbf7b316fb9a05cfa2fe656