在说明移动端的适配之前我们需要理解一个重要的东西 像素!!
在移动端给一个元素设置 width:400px 时发生了什么?这里的 px 到底是多长呢?像素是网页布局的基础,但是我们一直在用直觉使用它。 然而在使用的时候我们需要知道的是现实存在的情况是分为两种情况的
现实实际存在的像素,简而言之就是设备的像素,一台 mac 的像素一台移动端手机的本机硬件显示屏的像素,这个值是不可能改变,是在设计的时候机已经存在的固定值。单位是 pt。
CSS 的像素值是一个抽象的概念的,也就是我们在前端的学习和使用中所用到的,在 js 和 css 设置中所使用的像素值概念。单位是 px。 以此我们回到开始时说道的问题 width:400px, 这个值在具体的设备上是如何显示出来的我们就需要从两个维度综合考虑这个问题,因为这两个变量最终是决定如何显示的最后结果地方。
首先我们要知道的是视口属性的出现更多的是为了优化移动端对于网页显示的美观存在的。 在 mdn 上关于视口属性的介绍是这样的
移动端浏览器(如 Fennec)在一个通常比屏幕更宽的虚拟 "窗口"(视口)中渲染页面,从而无需将所有页面都压缩进小屏幕里(那样会把很多没有针对移动端进行优化的站点打乱)。用户可以通过平移和缩放来浏览页面的不同区域。 Mobile Safari 引入了 "viewport 元标签" 来让 web 开发者控制视口的尺寸及比例。如今许多其他移动端浏览器已经支持这一标签,虽然它不是任何 web 标准的一部分。苹果的 文档 详尽地说明了 web 开发人员可以怎样使用这一标签,然而我们还是不得不仔细推敲 Fennec 究竟应该怎样实现它。例如,Safari 的文档指出标签的内容应为 "由逗号分隔的列表",但是现有的浏览器和网页都把逗号、分号及空格混用作分隔符。
所以我们可以理解为: 桌面浏览器中,浏览器窗口就是约束你的 CSS 布局视口(又称初始包含块)。它是所有 CSS 百分比宽度推算的根源,它的作用是给 CSS 布局限制了一个最大宽度,视口的宽度和浏览器窗口宽度一致。 但是在移动端,情况就很复杂了。
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
width 属性控制视口的宽度。可以像 width=600 这样设为确切的像素数,或者设为 device-width 这一特殊值来指代比例为 100% 时屏幕宽度的 CSS 像素数值。(相应有 height 及 device-height 属性,可能对包含基于视口高度调整大小及位置的元素的页面有用。) initial-scale 属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale 及 user-scalable 属性控制允许用户以怎样的方式放大或缩小页面。
移动浏览器在处理屏幕方向改变时稍有差异。例如,Mobile Safari 通常在竖屏转横屏时只缩放页面,而不会把页面重新布局成横屏载入时的效果。如果 web 开发者想让 iPhone 在方向切换时保持固定比例,需要增加一个 maximum-scale 值来避免这样的的缩放,这会带来并非预期的禁止用户缩放页面的副作用:
- <meta name="viewport" content="width=500, initial-scale=1">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1">
在 mdn 中关于媒体查询的解释是
一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度、高度和颜色。媒体查询,添加自 CSS3,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身。 自我的理解是我们可以对媒体的一个类型进行限制,当我限制的条件被触发的时候我们就可以通过设置进行另外的一种样式的布局。 在移动端中因为本身的物理像素的限制,本身的物理像素较小,所以我们需要将本身在 pc 端很大的页面进行优化,让显示更加的巨像,这样的好处就是可以让整个页面的可读性进一步的提升,优化用户体验。 关于媒体查询的代码是
- <!-- link元素中的CSS媒体查询 -->
- <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
- <!-- 样式表中的CSS媒体查询 -->
- <style>
- @media (max-width: 600px) {
- .facet_sidebar {
- display: none;
- }
- }
- </style>
当媒体查询为 true 时,其对应的样式表或样式规则就会遵循正常的级联规则进行应用。即使媒体查询返回 false,[
标签指向的样式表 也将会被下载 (但是它们不会被应用) 除非使用 not 或 only 操作符,否则媒体类型是可选的,默认值是 all(全部). 具体的代码可以参考 此链接
- ](https://developer.mozilla.org/en-US/docs/Web/html/Element/link "The HTML <link> element specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets.")
rem 在 css 中是一种长度的表示方式就如同像素 px 是一样的,在 mdn 中的具体解释是
在移动端的优化中我们可以使用的是,将 rem 做宽度,viewport 缩放这个单位代表根元素的 font-size 大小(例如 元素的 font-size)。当用在根元素的 font-size 上面时 ,它代表了它的初始值 (译者注: 默认的初始值是 html 的默认的 font-size 大小, 比如当未在根元素上面设置 font-size 大小的时候, 此时的 1rem==1em, 当设置 font-size=2rem 的时候, 就使得页面中 1rem 的大小相当于 html 的根字体默认大小的 2 倍, 当然此时页面中字体的大小也是 html 的根字体默认大小的 2 倍)。
vw 是 CSS3 引入的单位,1vw = 1% 窗口宽度 举例来看
我们可以使用代码如下所示
- html{
- font-size: 屏幕宽度 / 10;
- }
- .btn{
- width:8.75rem;
- height:1.25rem;
- }
这样,无论屏幕宽度是多少,.btn 都是相对于屏幕的这么宽,做到了适配。
关于移动端的优化我们可以确定的是,其结果是无穷尽的,但是在 css 的不断升级和优化之后,对于移动端优化的便利性的提升是毋庸置疑的,上文所述的三点是关于移动端优化的关键所在。
来源: http://www.jianshu.com/p/6e24d9364507