关于响应式布局的总结与思考(一)-常识介绍
一.概念
Responsive Web Design(响应式布局)这个名词是Ethan Marcotte在2010年提出.简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上,屏幕比较宽,就可以一行放多个Div。到了手机上,或者Pad竖着拿的的时候,一行就只放1到2个Div就差不多了。这样在移动设备上,无论是字体大小还是页面布局就不会显得很局促.一切都是为了客户的体验度.
首先,要实现响应式布局,至少需要知道下面几个知识点
二、meta标签设置
下面的这段话在响应式布局里面必不可少
网页宽度调整
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
上面这行代码的意思是:网页宽度默认等于屏幕宽度(width=device-width)
,原始缩放比例(initial-scale=1.0)
,即网页初始大小占屏幕面积的100%。
当然这里除了这两个属性之外,还可以加上其他几个属性,比较完整的是这个样子:
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
maximum-scale=1.0
, minimum-scale=1.0
;可视区域的缩放级别,maximum-scale
用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上,minimum-scale=1.0
当然就是禁止缩小了。user-scalable
:是否可对页面进行缩放,no 禁止缩放
所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要另外重写。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
这个js文件在google上获取困难的话,可以直接在github上搜索相关资源,大家需要的话可以点击这里直接下载
常见的一些其他meta标签设置
很多触屏版的页面上都会加上下面几句meta
标签,虽然和响应式关系不是太大,这里一并说了吧
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
- 第一个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
- 第二个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式; 在web app应用下状态条(屏幕顶部条)的颜色; 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。 注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
- 第三个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码。
三.不使用绝对宽度和字体
不使用绝对宽度
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。
CSS代码不能指定像素宽度:
width:number px;
只能指定百分比宽度:
width: x%;
或者自动:
width: auto;
不使用绝对大小字体
只使用相对大小(em)字体,不能使用绝对大小(px)字体。下面这段代码的意思是:字体大小是页面默认大小的100%,即16像素;h1的大小是默认大小的1.5倍,即24像素(24/16=1.5);small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
h1 {
font-size: 1.5em;
}
当然无论是绝对宽度还是字体还不止这些,但是这又涉及到另外的知识和布局方式,放在下一章讲解.
四.图片缩放
除了布局和文本,响应式布局还必须实现图片的自动缩放。这只要一行CSS代码,对于大多数嵌入网页的视频也有效。
img { max-width: 100%;}
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好写成:
img { width: 100%; }
windows平台缩放图片时,可能出现图像失真现象。这是可以尝试针对IE浏览器内核写:
img { -ms-interpolation-mode: bicubic; }
一扯到IE就很头痛,但是既然已经要做响应式了,其实我个人的意见是还兼容IE
干嘛?还在使用老式IE浏览器的用户,几乎也可以忽略掉了.有时间浪费在这上面,还不如多想想功能和页面设计.
前面这三个是响应式布局必须要遵守或者应用的方式
五.流式布局
其实这个是响应式里面用得最多的一种表现方式.
什么意思呢?我们来回顾一下,一开始提出的例子.为了提高移动端用户的体验,本来页面在电脑上显示的效果是一行三个div,但是在移动端,为了字体和布局不显得局促,使用一行一个div,这个怎么做呢?我们先来看看效果.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
float: left;
width: 30%;
height: 100px;
margin: 10px;
}
#div1{
background-color: #006699;
}
#div2{
background-color: #ff6666;
}
#div3{
background-color: #ffff00;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
整个html
代码如上,上面这个代码,大家应该都知道.无非就是left:left
块级标签浮动了而已.显示效果如下:
当缩小浏览器宽度到一定程度时,就会出现如下效果:
当然为什么大家应该都想得到,因为 magin:10px;
是固定的,当缩小到一定程度,width:30%
已经不能填满整个100%的宽度了.
其实,响应式听名字好像挺高大上,其实最重要的表现形式就是这种.借用流动布局让界面显得不局促.比如,当界面缩小到一定程度的时候,直接显示成下面这种效果:
其实,就是css里面修改每一个div
的width
就好:
div{
float: left;
width: 95%;
height: 100px;
margin: 10px;
}
这里就是把 width:30%;
修改成了: width:100%;
.
那剩下的问题就是判断窗口大小了,首先想到的就是使用js,其实这里没必要,可以直接使用媒体查询
六.media query 媒体查询
讲到响应式,那么媒体查询(media query)肯定是不能避过的,概念就不多讲,其实直接看代码实验
div{
float: left;
width: 30%;
height: 100px;
margin: 10px;
}
@media only screen and (max-width: 600px) {
div{
width: 95%;
}
}
上面的代码,表示正常情况下div
的width
还是维持在30%
没有变化,但是当检测到screen
的最大宽度是600px
的时候,就将执行@media
里面的css,其实就是相当于利用了层叠样式表的特性,@media
里面的代码将原来的覆盖了.由此可见,@media
放在div
样式前面可以吗?
当然,既然又max-width
,就会有min-width
,很多初学者一直没搞清楚这两个的区别,老是搞混淆.其实记住一点. max-width
就是当屏幕小于等于多少的时候执行(<=) min-width
就是当屏幕大于等于多少的时候执行(>=)
所以,有时候精确判断的时候,可以写 屏幕>=多少 and 屏幕 <= 多少的时候执行:
div{
float: left;
width: 30%;
height: 100px;
margin: 10px;
}
@media only screen and (min-width: 601px) and (max-width: 980px) {
div{
width: 45%;
}
}
@media only screen and (max-width: 600px) {
div{
width: 95%;
}
}
上面的代码相当于,当 屏幕宽度 >= 601px && 屏幕宽度 <= 980px的时候,页面上实际上在一行显示2个div,因为2个45%
就已经是90%
,剩下的那个肯定就被挤下去了.
当屏幕宽度<=600px的时候,就让一个div占满一行(95%)
媒体查询当然不只是这些,不过上面的部分是最重要最常用的,媒体查询其实还有很多其他属性
七.使用 Media Queries 适配对应样式
常用于布局的CSS Media Queries有以下几种
设备类型(media type): all
所有设备 screen
电脑显示器 print
打印用纸或打印预览视图 handheld
便携设备 tv
电视机类型的设备 speech
语意和音频盒成器 braille
盲人用点字法触觉回馈设备 embossed
盲文打印机 projection
各种投影设备 tty
使用固定密度字母栅格的媒介,比如电传打字机和终端
设备特性(media feature): width
浏览器宽度 height
浏览器高度 device-width
设备屏幕分辨率的宽度值 device-height
设备屏幕分辨率的高度值 orientation
浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为portrait
,否则为landscape
aspect-ratio
比例值,浏览器的纵横比 device-aspect-ratio
比例值,屏幕的纵横比
注意device-width/height
与width/height
的区别.下面都是判读的设备的宽高而不是浏览器
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
selector{ ... }
}
/* for 320px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:320px){
selector{ ... }
}
/* for 480 px width screen */
@media only screen (min-device-width:321px)and (max-device-width:480px){
selector{ ... }
}
关于响应式其实在工作中有很多细节,这里说的很简单,但是实际却有很多的坑,所以只有多练习多做.比如图片的问题,高分辨率(DPI)的问题等等,这里就不再细说.
下面说一个工作中经常会遇到的问题:
高分辨率下的1px border,这是在苹果的设备上经常会遇到的问题,大家可以留作备份查询
由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设计稿有出入,为了追求1px精准还原,我们就不得不拿出一个完美的解决方案
在Photoshop中,如果需要看似0.5px的边框,常见的方法就是对1px边框加上阴影模糊1px。同理,我们在retina屏下需要做到真实的1px边框,可利用box-shadow属性模拟。
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
button {
border:none;
padding:0 16px;
box-shadow: inset 0 0 1px #000,
inset 0 1px 0 #75c2f8,
0 1px 1px -1px rgba(0, 0, 0, .5);
}