开发移动端页面和响应式布局
开发移动端页面和响应式布局
响应式布局
响应式布局是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″>
意思分别是:
1、initial-scale=1.0 :初始缩放比例为1.0(原始大小),这句代码的目的是防止用户 缩放的,
2、minimum-scale=1.0 :网页小的缩小比例为1.0(原始大小),设置这句代码的目的是为 了放置某些程序(比如JS)无意中修改了网页的缩小比例
3、maximum-scale=1.0 :网页大的放大比例为1.0(原始大小),设置这句代码的目的是为 了放置某些程序(比如JS)无意中修改了网页的放大比例
4、user-scalable=0 :这句代码才是不允许用户对网页进行缩放
移动端元素的尺寸问题
尺寸随着视口宽度的变化而变化
方法:
1、首先,写一段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
2、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 。这样就完美的和设计稿比例 一致了。
当然,在移动端,如果你使用了背景图(比如雪碧图),记得用同样的方式调整背景图的尺寸。