开发移动端页面和响应式布局

 开发移动端页面和响应式布局

响应式布局

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

　　因为响应式布局要针对不一样的视口尺寸，对样式做出更多的修改，所以并不像流式布局那样让宽度 自动适应那么简单。
　　实现响应式布局最核心的技术就是使用媒体查询（media selector）。
　　媒体查询是CSS3引入的概念，是指针对不一样的设备、不一样的视口尺寸，使用不一样的样式代码。

媒体查询的书写格式以下：

@media screen and (min‐width:1200px){ 
/* 视口 ≥ 1200px 要应用的样式 */ 
} 
@media screen and (min‐width:992px) and (max‐width:1200px){ 
/* 992px ≤ 视口 < 1200px 要应用的样式 */ 
} 
@media screen and (max‐width:992px){ 
/* 视口 <992px 要应用的样式 */ 
} 

 

常见的视口尺寸

 

视口尺寸和设备关系表
视口 　　　　　　　　　　　　　　　　设备
≥1200px 大屏幕：　　　　　　　　　　投影仪 电视 PC端
≥992px && <1200px 中等屏幕：　　  上网本、小型笔记本
≥768px && <992px 小屏幕：平板
<768px 超小屏幕：手机

 

根据上述的关系表，再结合你网站的实际状况，就能够很容易的得出你须要编写的媒体查询代码。
好比，个人网站只考虑两种状况：
　　1.手机端显示一种风格
　　2.其余设备共享一种风格
那么对某个须要响应式布局的元素，个人CSS代码应该相似下面的格式：

/* 元素共有的样式 */ 
... 
/* 除手机端以外的样式*/ 
@media screen and (min‐width:768px) { 
... 
} 
/* 手机端的样式 */ 
@media screen and (max‐width:768px) { 
...
}

 

在Sass中使用媒体查询
开发一个实际的项目时，咱们一般会选择一些预编译器来处理咱们编写的CSS源代码，好比 SASS。不少预编译器都对媒体查询有很好的支持。
　　Sass 中 @media 指令与 CSS 中用法同样，只是增长了一点额外的功能：容许其在 CSS 规则中嵌 套。若是 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的 父选择器。这个功能让 @media 用起来更方便，不须要重复使用选择器，也不会打乱 CSS 的书写 流程。
示例：

.sidebar{ 
width: 300px; 
@media screen and (min‐width:768px) { 
width: 500px;
}
}

开发移动端页面

移动端独有 的一些特性，须要咱们在开发时特别关注。这些特性包括：

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

移动端的视口宽度问题

　　关键字 device-width ，该关键是读取当前移动设备的宽度.

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

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

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

当用户用手指在移动端滑动网页的时候，手机每每提供下面的功能：
 　　快速双击，可放大页面
　　 双指收放，可放大缩小页面

禁止用户对网页进行缩放的方法：

<meta name="viewport" content="width=device-width, initial-scale=1.0, min imum-scale=1.0, maximum-scale=1.0, user-scalable=0">
意思分别是：
　　一、initial-scale=1.0 ：初始缩放比例为1.0（原始大小），这句代码的目的是防止用户 缩放的，
　　二、minimum-scale=1.0 ：网页小的缩小比例为1.0（原始大小），设置这句代码的目的是为 了放置某些程序（好比JS）无心中修改了网页的缩小比例
　　三、maximum-scale=1.0 ：网页大的放大比例为1.0（原始大小），设置这句代码的目的是为 了放置某些程序（好比JS）无心中修改了网页的放大比例
　　四、user-scalable=0 ：这句代码才是不容许用户对网页进行缩放

移动端元素的尺寸问题

尺寸随着视口宽度的变化而变化
　　方法：
　　　　一、首先，写一段JS代码，应用到网页

!(function(win, doc) {
function setFontSize() {
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + 'px';
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
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));

　　- 将上述代码中的 设计稿宽度 替换为设计稿的实际宽度，好比1080（不要加单位px）
　　- 将上述代码中的 比例 替换为一个合适的值，好比100

　　这段代码它是不断监控视口宽度的变化，始终保证：
　　根元素html的字体大小 = (视口宽度 / 1080) * 100

　　好比，iphoneX的视口宽度为：375，因而，在iphoneX中，根元素html的字体大小 为： (375/1080)*100 = 34.72px

　　　　二、css中的全部像素值变化为使用rem单位 　　　　　　rem单位是相对于根元素html字体大小的（若是根元素没有设置字体大小，则相对于基 准字号）。而如今，根元素的字体大小，正好反映了视口的宽度。 　　　　　　一个元素某个尺寸的rem值公式以下： 　　　　　　rem值 = 设计稿中的尺寸 / 100 好比，设计稿中某个元素的宽度为100像素，那么应该设置它的宽度为 1rem ，这样一来，当视口 尺寸等于设计稿尺寸1080时，根元素的字体大小为 (1080/1080)*100 = 100px ，它的宽度 为 1rem = 100px ；若是视口尺寸变小了，好比变成了375，那么根元素的字体大小为 (375/1080)*100 = 34.72px ，那么它的宽度为 1rem = 34.72px 。这样就完美的和设计稿比例 一致了。 固然，在移动端，若是你使用了背景图（好比雪碧图），记得用一样的方式调整背景图的尺寸。