您的位置：首页 > 其它

响应式布局

2016-02-28 11:04 387 查看

响应式设计的步骤

1.meta标签

在<head>标签里加入这个meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

a、width : 控制viewport的大小，可以指定一个值，如600，或者特殊的值，如device-width为设备的宽度（单位是缩放为100%的CSS的像素）

b、height : 和width相对应，指定高度

c、initial-scale : 初始缩放比例，页面第一次加载时的缩放比例

d、maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0

e、minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0

f、user-scalable : 用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放

2. 通过媒体查询来设置样式 Media Queries(核心)

CSS3 Media Queries得到了众多浏览器支持，除了IE6-8浏览器不支持之外，在所有现代浏览器中都可以完美支持。

根据条件告诉浏览器如何为指定视图宽度渲染页面

假如一个终端的分辨率小于 980px，那么可以这样写：

@media screen and (max-width: 980px) {

#head { … }

#content { … }

#footer { … }

}

这里的样式就会覆盖上面已经定义好的样式。

在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。如下表所示：

值	设备类型
All	所有设备
Braille	盲人用点字法触觉回馈设备
Embossed	盲文打印机
Handheld	便携设备
Print	打印用纸或打印预览视图
Projection	各种投影设备
Screen	电脑显示器
Speech	语音或音频合成器
Tv	电视机类型设备
Tty	使用固定密度字母栅格的媒介，比如电传打字机和终端

其中Screen、All和Print为最常见的三种媒体类型。

Media Queries使用方法

@media 媒体类型and （媒体特性）{你的样式}

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。

常用的方式：

A.最大宽度max-width,是指媒体类型小于或等于指定的宽度时，样式生效

B.最小宽度min-width,是指媒体类型大于或等于指定的宽度时，样式生效

C.设备屏幕的输出宽度device-width

D.Not关键词，用来排除某种制定的媒体类型

E.Only关键词，only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用

3.布局技巧

第一，尽量少用无关紧要的div；

第二，不要使用内联元素（inline）；

第三，尽量少用JS或flash；

第四，丢弃没用的绝对定位和浮动样式；

第五，摒弃任何冗余结构和不使用100%设置。

第六，使用HTML5 Doctype和相关指南；

第七，重置好你的样式（reset.css）；

第八，一个简单的有语义的核心布局；

第九，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。

怎么样的布局或者说HTML结构才是简单干净的呢？这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。

注意事项

1. 宽度需要使用百分比

例如这样：

#head { width: 100% }

#content { width: 50%; }

2. 处理图片缩放的方法

简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。

img { width: auto; max-width: 100%; }

用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能： HTML结构：

<img src="image.jpg" alt="折腾响应式布局设计"

data-src-600px="image-600px.jpg"

data-src-800px="image-800px.jpg"

alt="">

CSS 控制：

@media (min-device-width:600px) {

img[data-src-600px] {

content: attr(data-src-600px, url);

}

}

@media (min-device-width:800px) {

img[data-src-800px] {

content: attr(data-src-800px, url);

}

}

3. 其他属性

例如 pre ，iframe，video 等，都需要和img一样控制好宽度。对于table，建议不要增加 padding 属性，低分辨率下使用内容居中：

table th, table td { padding: 0 0; text-align: center; }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航