目前在空闲时间随便播写了个网站,想要做成响应式的类型,顺便过下适配方面的知识点。
什么是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的字体大小就可以根据屏幕分辨率不同进行变化。 未完待续。。。