响应式布局和移动端开发

响应式布局

l 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站可以兼容 多个终端，而不是为每一个终端作一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

l 响应式布局能够为不一样终端的用户提供更加温馨的界面和更好的用户体验，并且随着目前大屏幕移 动设备的普及，愈来愈多的设计师采用这个技术。

l 一个典型的响应式布局网站：http://www.16ketang.com/

l 试着逐渐缩小该页面的窗口，看看网页有什么变化

l 因为响应式布局要针对不一样的视口尺寸，对样式做出更多的修改，所以并不像流式布局那样让宽度 自动适应那么简单。

l 实现响应式布局最核心的技术就是使用媒体查询（media selector）。

l 媒体查询是CSS3引入的概念，是指针对不一样的设备、不一样的视口尺寸，使用不一样的样式代码。

l 响应式布局的原理，正是大量的使用媒体查询，让页面中一些元素在不一样的视口中具备不一样的样式 表现。

l 常见的视口尺寸

l 虽然你如今知道了如何使用媒体查询，但咱们真正关心的，是页面在手机、平板、上网本或小型笔 记本、PC端中具备更好的表现力。

l 但问题是手机型号众多，其余设备也是如此，它们的尺寸不尽相同，咱们如何来断定当前的视口尺 寸属于什么设备呢？

l 好在通过大量的实践应用，开发者已经总结了一套广泛的适用规则，按照这套规则，你就能够将视 口尺寸和具体设备对应起来。

l 视口尺寸和设备关系表

视口                设备

≥1200px            大屏幕：投影仪 电视 PC端

≥992px && <1200px   中等屏幕：上网本、小型笔记本

≥768px && <992px    小屏幕：平板

<768px              超小屏幕：手机

l 根据上述的关系表，再结合你网站的实际状况，就能够很容易的得出你须要编写的媒体查询代码。

l 好比，个人网站只考虑两种状况：

1. 手机端显示一种风格 2. 其余设备共享一种风格

l 在Sass中使用媒体查询

l 开发一个实际的项目时，咱们一般会选择一些预编译器来处理咱们编写的CSS源代码，好比 SASS。不少预编译器都对媒体查询有很好的支持。

l Sass 中 @media 指令与 CSS 中用法同样，只是增长了一点额外的功能：容许其在 CSS 规则中嵌 套。若是 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的 父选择器。这个功能让 @media 用起来更方便，不须要重复使用选择器，也不会打乱 CSS 的书写 流程。

开发移动端页面

l 实际上，开发移动端页面，和开发一个普通的页面并无本质的区别。只不过移动端独有 的一些特性，须要咱们在开发时特别关注。这些特性包括：

1. 移动端的视口宽度问题 2. 移动端误触形成的缩放问题 3. 移动 端元素的尺寸问

移动端的视口宽度问题

l 视口是指浏览器的可视区域，移动端的视口究竟是多宽呢？

l 如今市面上的大部分手机，好比iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽 度仅仅为375px。看到问题了吗？一个宽度只有375像素的手机，却可以显示宽度为980像素的网 页，天然而然，网页会被缩小。

l 咱们可使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，能够看到网页明显被缩小 了，并且页面宽度定格在980px。

l 在HTML给咱们提供了一个关键字 device-width ，该关键是读取当前移动设备的宽度。所以， 咱们只须要使用下面的代码，便可让全部移动设备的视口宽度和其自身的宽度相等:

<meta name="viewport" content="width=device-width">

这样就解决了移动端视口宽度和自身宽度不一致的问题。

移动端误触形成的缩放问题

l 当用户用手指在移动端滑动网页的时候，手机每每提供下面的功能：

1. 快速双击，可放大页面 2. 双指收放，可放大缩小页面

l 因为移动端误触较多，而咱们的网页原本就是专门为移动端开发的，不管是尺寸仍是各类样式，在 默认的状况下已经很是合适了，根本不须要用户去缩放网页（你会发现，几乎全部app中的页面， 都是不容许缩放的），所以，禁止用户对网页进行缩放是一个不错的选择。

l 具体的作法是在上一节中的 meta 元素中继续加入内容：

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

l initial-scale=1.0 ：初始缩放比例为1.0（原始大小），这句代码的目的还不是放置用户 缩放的，书写上它有其余复杂的缘由，不过本文不涉及

l minimum-scale=1.0 ：网页小的缩小比例为1.0（原始大小），设置这句代码的目的是为 了放置某些程序（好比JS）无心中修改了网页的缩小比例

l maximum-scale=1.0 ：网页大的放大比例为1.0（原始大小），设置这句代码的目的是为 了放置某些程序（好比JS）无心中修改了网页的放大比例

l user-scalable=0 ：这句代码才是不容许用户对网页进行缩放

移动端元素的尺寸问题

l 网页中的不少元 素，随着视口的宽度变大，尺寸也会随之变大，不管是字体、高度、间隙都有这样的特色。

l 当遇到字体大小、宽高、margin、padding等尺寸 类的属性时，不能设置固定的像素值。

l 这段js代码能够实现转换rem值：

!(function(win, doc) {     function setFontSize() {         var winWidth = window.innerWidth;

        doc.documentElement.style.fontSize = (winWidth / 设计 稿宽度) * 比例 + 'px';     }     var evt = 'onorientationchange' i n win ? 'orientationchange' : 'resiz e';     var timer = null;      win.addEventListener(evt, function() {         clearTimeout(timer);

        timer = setTimeout(setFontSize, 300);     }, false);     win.addEventListener("pageshow", function(e) {         if (e.persisted) {             clearTimeout(timer);             timer = setTimeout(setFontSize, 300);         }     }, false);     //初始化     setFontSize(); }(window, document));

将

 css中的全部像素值变化为使用rem单位

l 咱们知道，rem单位是相对于根元素html字体大小的（若是根元素没有设置字体大小，则相对于基 准字号）。而如今，根元素的字体大小，正好反映了视口的宽度。

l 因而，咱们只须要将各类尺寸的值，使用rem做为单位，就能够适应视口宽度的变化了。

l 具体怎么设置呢，很是的简单，一个元素某个尺寸的rem值公式以下：rem值 = 设计稿中的尺寸 / 100

l 好比，设计稿中某个元素的宽度为100像素，那么应该设置它的宽度为 1rem ，这样一来，当视口 尺寸等于设计稿尺寸1080时，根元素的字体大小为 (1080/1080)*100 = 100px ，它的宽度 为 1rem = 100px ；若是视口尺寸变小了，好比变成了375，那么根元素的字体大小为 (375/1080)*100 = 34.72px ，那么它的宽度为 1rem = 34.72px 。这样就完美的和设计稿比例 一致了。

l 固然，在移动端，若是你使用了背景图（好比雪碧图），记得用一样的方式调整背景图的尺寸。