文档章节

响应式网页设计——学习笔记一

liuxiaofan
 liuxiaofan
发布于 2016/01/26 09:00
字数 1604
阅读 7
收藏 0

知识点整理:

1. CSS 的 @import 方式会增加 HTTP 请求(这会影响加载速度),所以请谨慎使用该方法。

2. 现代浏览器虽然可以智能地忽略与自身不匹配的样式文件,但它却不一定不下载这些文件。因此,将不同媒体查询的样式保存到独立的文件中没有太大好处(个人喜好或为便
于组织代码除外)。使用多个独立的文件会增加用于页面渲染的 HTTP请求数量,从而导致页面加载变慢。

3. Respond.js(https://github.com/scottjehl/Respond)是为 Internet Explorer 8及更低版本增加媒体查询支持的最快的 JavaScript工具,但它目前无法解析 CSS的 @import 命令。因此,建议在已有的样式表中追加媒体查询样式。

4.一个通用的重置样式,可以根据自己的需要更改。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
5. 防治页面自动调整页面大小, <meta> 标签中可以设置具体的宽度(如像素值)或者缩放比例如 2.0(设备实际尺寸的两倍)。
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
6. 禁止用户缩放页面,在实践中很少禁用。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

7. 流动布局宽度变成百分比,计算公式:目标元素宽度÷上下文元素宽度=百分比宽度 ,上下文宽度就是紧邻的外围div宽度,最外层div可以自由发挥,可以是100%,或是其他。页面各处的内边距、外边距也替换成等价的百分比值。不过这当中的上下文是最外层的div宽度,不是上一层div宽度。百分比的结果最好不要四舍五入。

8. 用em代替px作为字体单位。“目标元素尺寸÷上下文元素尺寸=百分比尺寸”这个公式也适用于将文字的像素单位转换为相对单位。现代浏览器默认字体大小为16px,采用这个单位的好处是如果在完成了所有文字排版后,客户又提出将页面文字统一放大一点,我们就可以只修改 body 的文字大小,其他所有文字也会相应变大。

<h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>
修改后的相对单位样式如下:
#content h1 {
font-family: Arial, Helvetica, Verdana, sans-serif;
text-transform: uppercase;
font-size: 4.3125em; } /* 69 ÷ 16 */
#content h1 span {
display: block;
line-height: 1.052631579em; /* 40 ÷ 38  上下文为本身*/
color: #757474;
font-size: .550724638em; /* 38 ÷ 69  上下文为69*/
}

以上代码的重点在于目标元素的尺寸,和上下文元素的尺寸。

9. 为不同的屏幕尺寸提供不同的图片。

    Matt Wilcox 的“自适应图片  http://adaptive-images.com 了。实现 Adaptive Images解决方案需要 Apache 2、PHP 5.x和 GD库,也就是说需要 Web服务器端编程。首先,在其网站上下载.zip文件开始配置:解压文件,然后将其中的 adaptive-images.php 和 .htaccess 文件拷贝到网站的根目录。如果你网站的根目录下已经有一个 .htaccess 文件了,不要覆盖它。参考下载包中的 instructions.htm 文件看看怎么做合适。接着在网站根目录下创建一个名为 ai-cache的文件夹。用你最喜欢的 FTP客户端软件设置该文件夹的权限为 777 。然后把如下 JavaScript代码复制到每个需要自适应图片的网页的头部:<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+';path=/';/script>如果你没有使用 HTML5(在下一章会改用 HTML5),想让页面通过标准验证,则需要追加 type属性。所以 script标签应如下所示:<script type="text/javascript">document.cookie='resolution='+Math.maxscreen.width,screen.height)+'; path=/';</script>切记这段 JavaScript 代码要放在页面头部(最好作为第一个脚本),因为它需要在页面加载完成之前,而且要在发出图片请求之前运行。过去,我通常将所有图片都放在一个名如 images或 img的文件夹中,不论是用做 CSS背景的图片,还是通过标签插入的图片。但是在使用自适应图片方案时,建议将那些用于CSS的背景图片(或者那些你不想被缩放的图片)放在另一个目录。自适应图片方案默认为此创建的目录是 assets 。如果你不想缩放某张图片,把它丢进这个文件夹即可。如果你想将这类图片存在其他(或更多)文件夹中,则需要像下面这样修改 .htaccess 文件。

<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images --------------------------------------------------------
RewriteCond %{REQUEST_URI} !assets
RewriteCond %{REQUEST_URI} !bkg
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above
directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images -----------------------------------------------------
</IfModule>
上面的代码设定了存在 assets 或 bkg 文件夹中的图片不会被缩放。反之,如果你想显式声明只允许某个特定文件夹中的图片被缩放,那么将设置规则中的感叹号去掉即可。例如,如果我只想让网站根目录下名为 andthewinnerisnt 的文件夹中的图片被缩放,则修改后的代码如下所示:

<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images ------------------------------------------------------
RewriteCond %{REQUEST_URI} andthewinnerisnt
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images --------------------------------------------------
</IfModule>
10 . 媒体查询代码,一下两种方式,一种判断最大尺寸,一种判断范围

@media screen and (min-width: 1001px) and (max-width: 1080px) {
#navigation ul li a { font-size: 1.4em; }
}<pre name="code" class="css">@media screen and (max-width: 1080px) {
#navigation ul li a { font-size: 1.4em; }
}

11. CSS网格系统/框架

Columnal:http://www.columnal.com)。如果你需要一种快速搭建响应式网站结构的方法,那么 Columnal这样的 CSS网格系统值得考虑。

本文转载自:http://blog.csdn.net/steven_lxf/article/details/43308373

liuxiaofan
粉丝 0
博文 96
码字总数 38986
作品 0
枣庄
后端工程师
私信 提问
加载中

评论(0)

【原创】响应式设计之移动端调试工具

背景 2013年是网页设计响应式的一年。所谓响应式网页设计,是由Ethan Marcotte在2010年提出的名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同...

Mr.Zheng
2013/07/02
1K
0
14个HTML/CSS设计和开发框架

专业的网页设计是既复杂又耗时的。它需要HTML和CSS框架的完美结合。这些框架不仅可以为设计方案增加特定的功能,还可以大大地节省时间和精力。 高效的框架不仅是网站设计的基础,它提供的各种...

IanSun
2015/03/14
147
0
十大前端开发框架(上)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:site point。欢迎加入翻译组。 编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部...

伯乐在线
2013/07/16
0
0
响应式不是万能的!教你提升响应式设计的移动性能

你调整了浏览器,笑容攀上脸颊。你感到非常开心,认为自己实现了友好移动的目标。在正式讨论前,让我来预测下未来:你会失掉用户和经济效益,如果你把响应式网页作为唯一目标和唯一的解决办法...

罗马教堂的钟声
2015/11/24
70
0
掌握这11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
2018/06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

django

aiodns 1.1.1aiohttp 3.6.1asn1crypto 0.24.0async-timeout 3.0.1attrs 19......

MtrS
5分钟前
0
0
SQL查询单表数据(一)

本节讲述 基本的 select 查询单表数据语句 1 从单表中查询所有的行和列 查询表中所有的数据 select * from t_user 在 SQL 中,字符 "*" 具有特殊的含义,使用用它,将从指定的表中返回每一列...

赵子龙
12分钟前
5
0
签名与无符号整数

我是否正确地说有符号和无符号整数之间的区别是: 无符号可以保持较大的正值,而不是负值。 无符号使用前导位作为值的一部分,而带符号版本使用最左侧位来标识数字是正数还是负数。 有符号整...

javail
18分钟前
25
0
【Vue_05】前端工程化

一、ES6的模块化 1. ES6模块化规范 每个 js 文件都是一个独立的模块 导入模块成员使用 import 关键字 暴露模块成员使用 export 关键字 2. 基本语法 发使用 export default { }导出默认成员 ...

Demo_Null
19分钟前
18
0
阿里P7高级架构师分享6年多的Java工作经验(想冲破瓶颈者必看)

很多工作了五年左右的程序员每天已经习惯了机器般的写代码,如果是这样那么你永远只会是个基础程序员,因为你不能只会用,你要知道原理,不至于让你自己实现一个出来,但是基本原理要知道。 ...

JAVA一方
30分钟前
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部