响应式第一篇章-viewport,media,rem


title: viewport ,media, rem
date: 2016-11-22
tags: 响应式布局


0x00 viewport

通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,但实际情况下并不总是这样。

移动设备的屏幕尺寸比 PC 端的屏幕尺寸要小得多,所以,移动端的浏览器为了能让那些在 PC 端开发的网站被正常的显示,决定默认情况下把 viewport 设为一个较宽的值,我们暂且把这个浏览器默认的 viewport 叫做 layout viewport,这个 layout viewport 的宽度可以通过 document.documentElement.clientWidth 来获取(iphone6的 layout viewport 值为 980 px)。

此外,还需要一个 viewport 来代表浏览器可视区域的大小,我们这个 viewport 称为 **visual viewport,可以通过window.innerWidth` 来获取它的宽度值.

最后,还有一个能够完美适配移动端设备的 viewport 。所谓的完美适配指的是,首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容;第二,显示的文字的大小是合适,比如一段14px大小的文字,不会因为在一个高密度像素的屏幕里显示得太小而无法看清,理想的情况是这段14px的文字无论是在何种密度屏幕,何种分辨率下,显示出来的大小都是差不多的。我们把这个 viewport 叫做 ideal viewport,即是 理想 viewportideal viewport 的宽度等于移动设备的屏幕宽度。

ideal viewport 并没有一个固定的尺寸,不同的设备拥有有不同的 ideal viewport,目前,iphone6的 ideal viewport 宽度值是 375px


0x01 meta 媒体查询

我们可以通过 meta 标签对移动设备的 viewport (移动设备默认的是 layout viewport),进行控制。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,minimum-scale=0.5,user-scalable=yes"/>

对 meta viewport content 中的属性解释如下:

  • width : 设置 layout viewport 的宽度,该值为一个正整数,当设置为字符串 width-device 时,意味着将浏览器的 viewport 设置为 ideal viewport
  • initial-scale :设置页面的初始缩放值
  • minimum-scale :用户所能进行的最小缩放值
  • maximum-scale :用户所能进行的最大缩放值
  • user-scalable :是否允许用户进行缩放,值为 yesno

这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开。

此外,缩放是相对于 ideal viewport 来缩放的,缩放值越大,当前viewport 的宽度就会越小,反之亦然。

CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。

link 元素中应用媒体查询:

<link href="example.css" rel="stylesheet" media="(max-width:800px) and (min-width:375px) ">
  • max-width :当媒体可视区域的宽不大于该值时应用 example.css 样式

  • min-width: 当媒体可视区域的宽不小于该值时应用 example.css 样式

在 CSS 样式中使用媒体查询:

<style type="text/css">
    @media screen and (max-width: 800px) and (min-width: 375px){
        /*style*/
        *{
            background: red;
        }
    }
</style>

这个查询适用于宽度在 375px 和 800px之间的屏幕 screen 。与此类似的媒体类型 tv 代表电视, handheld 代表手持设备,print 代表打印机。

其中, and 属于逻辑操作符合,此外,还有 not, only, or 等逻辑操作符, 并且 or 操作符和 逗号(,) 操作符的作用一样。

比如,想在最小宽度为700像素或是横屏的手持设备上应用一组样式:

@media (min-width: 700px), handheld and (orientation: landscape) { ... }
// (orientation: portrait) 表示竖屏设备

媒体查询要写在 所有的 CSS 样式的最后


0x02 rem

当在进行移动设备的布局时,我们将会经常使用的一个单位是 rem,而不再是 px

rem, em

remem 的参考对象都是 font-size 这个属性的值,不过 em 的参考对象是父级的 font-size 值,而 rem 的参考对象是根元素 <html> 元素的 font-size 值。

1em = 父级 font-size 大小,1rem = 根元素 font-size 大小

如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,下面是各个分辨率范围在 html上 设置 font-size 的代码:

html{font-size:10px}
        @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
        @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
        @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
        @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
        @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
        @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
        @media screen and (min-width:800px){html{font-size:25px}}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容