响应式布局

时间 2019-11-12

标签响应布局繁體版

原文原文链接

一.概念

Responsive Web Design（响应式布局）这个名词是Ethan Marcotte在2010年提出.简单说呢就针对不一样的屏幕分辨率应用不一样的CSS样式。好比在电脑、Pad设备上，屏幕比较宽，就能够一行放多个Div。到了手机上，或者Pad竖着拿的的时候，一行就只放1到2个Div就差很少了。这样在移动设备上,不管是字体大小仍是页面布局就不会显得很局促.一切都是为了客户的体验度.javascript

首先,要实现响应式布局,至少须要知道下面几个知识点css

2、meta标签设置

下面的这段话在响应式布局里面必不可少html

网页宽度调整

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1.0），即网页初始大小占屏幕面积的100%。java

固然这里除了这两个属性以外,还能够加上其余几个属性,比较完整的是这个样子:css3

<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 禁止缩放git

全部主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE六、七、8），须要另外重写。github

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

这个js文件在google上获取困难的话,能够直接在github上搜索相关资源,你们须要的话能够点击这里直接下载web

常见的一些其余meta标签设置

不少触屏版的页面上都会加上下面几句meta标签,虽然和响应式关系不是太大,这里一并说了吧windows

<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>

六.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);
  }
}