码迷,mamicode.com
首页 > Web开发 > 详细

十二章:构建响应式网站

时间:2015-12-02 00:50:16      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

响应式网页可以根据浏览设备的不同而灵活的改变尺寸。省去了重新编写网页的麻烦。

1.响应式页面的组成:

(1)灵活的图像和媒体。

(2)灵活的、基于网格的布局,也就是流式布局。

(3)媒体查询。

2.创建可伸缩图像:

对任何想做成可伸缩图像的图像,在HTML的img标签中省略width和height属性,在样式表中,为每个想做成可伸缩图像应用:max-width:100%。还可以使用video、embed、object{max-width:100%;}让HTML5视频及其他媒体变成可伸缩。

3.创建弹性布局需要使用百分数宽度,计算百分数宽度的方法:要指定的宽度(以像素为单位)/容器宽度(以像素为单位)=值

4.创建弹性布局的步骤:对于需要某个宽度实现预期布局的元素设置:width:percentage;其中percentage表示你希望元素在水平方向上占据容器空间的比例。

5.有两种方法针对特定的媒体类型定位CSS:

(1)使用link元素的media属性,位于head内。

(2)在样式表中使用@media规则。

媒体查询增强了媒体类型的方法,允许根据特定的设备特性定位样式。方法有两种:

(1)指向外部样式表的链接:

<link rel=”stylesheet”

media=”logictype and (feature:value)”

href=”your-stylesheet.css” />

(2)位于样式表中的媒体查询:

@media logic type and (feature:vlaue){/*目标CSS样式规则写在这里*/}

logic部分是可选的,其值可以是only或not。only关键字可以确保旧的浏览器不读取余下的媒体查询,同时一并忽略链接的样式表。not关键字可以对媒体查询的结果求反。例如:使用media=”not screen”会在使用screen以外的任何类型时加载样式表。type部分是媒体类型,如screen、print等。feature:value 是可选的,但一旦包含它们,它们必须用括号包围且前面要有and这个字。

6.了解了可伸缩图像、弹性布局和媒体查询的知识之后,就可以将它们组合在一起,创建响应式网页。

(1)创建内容和HTML:

(2)在HTML页面的head元素中,输入<meta name=”viewport” content=”width=device-width” />或<meta name=”viewport” content=”width=device-width,initial-scale=1” />

(3)创建适用于所有设备的基准样式,参考移动优先方法:首先为所有的设备提供基准样式,基准样式包括基本的文本样式,内边距、外框、外边距和背景,以及设置可伸缩图像的样式。然后使用媒体查询逐渐为更大的屏幕定义样式。

(4)识别出适合你的 内容样式的所有断点。断点是需要修改的地方。

(5)选择希望的浏览器的显示方式(考虑兼容性等)

(6)开始测试。

7.兼容旧版IE:

(1)什么都不做让网站显示基本的版本。

(2)为它们单独创建一个样式表,让他们显示网站最宽的版本。

(3)如果希望页面有响应式的效果就在页面中引入respond.min.js。

十二章:构建响应式网站

标签:

原文地址:http://www.cnblogs.com/koto/p/5011678.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!