1.媒体查询可以在链接link标签和具体的CSS中使用;

2.通过<link>标签的 media 属性为样式表指定设备类型和其他条件  中间用and和()来分隔,如下

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:     800px)" href="800wide-portrait-screen.css" /> 

3.视口宽度(width)   屏幕宽度(device-width)   前者指没有工具栏的宽度(完完全全展示网页内容的部分)   后者指屏幕的宽度或者分辨率

4.-----------------目标元素宽度÷上下文元素宽度=百分比宽度----------------------

具体的做法是:先选取一个上下文元素宽度   比如#content width=96%  从设计图上得到它的宽度是100px*96%  即96px

然后后面的目标元素,比如nav,其宽度百分比就是  20/96*100%

(百分比是按照上下文元素来算的,也就是按父元素算的)——严格把外面包裹它的第一层元素宽度当做100%

5.同样的em也是全看外面包裹的父元素来算

#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 */
}

可以看到<span>元素的文字大小(38 像素)是相对于其父元素的文字大小(69 像素) 而言的。而它的行高(40像素)则是相对于其本身的文字大小(38像素)而言。

6.在现代浏览器(包括 IE 7+)中要实现图片随着流动布局相应缩放非常简单。只需在 CSS 中作如下声明:
img {   max-width: 100%; }
这样就可以使图片自动缩放到与其容器 100%匹配。

也就是可以让图片铺满你装图片的那个div,你需要给那个div做流性布局就好了    其实也就是width100%   或者你设50%那么就可以放两张刚刚好了,maxwidth一般是设定阀值的时候用的,避免图片因viewport太大而被拉伸的太大;

7.H5可以这么写

<a href="index.html">
<h2>The home page</h2>
<p>This paragraph also links to the home page</p>
<img src="home-image.png" alt="home-slice" />
</a>

很方便

8.

响应式web设计读书笔记的更多相关文章

  1. 《响应式Web设计实践》学习笔记

    原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...

  2. 响应式WEB设计的9项基本原则

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

  3. 最佳的 14 个免费的响应式 Web 设计测试工具

    一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...

  4. <HTML5和CSS3响应式WEB设计指南>译者序

    "不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

  5. 如何通过CSS3 实现响应式Web设计

    如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...

  6. [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

    原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...

  7. css014 响应式web设计

    css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...

  8. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  9. 推荐35个新鲜出炉的响应式 Web 设计实例

    响应式设计的准则在于根据用户使用的屏幕的分辨率来改变网站的的布局.因此,视频或图像的大小和文本的数量,可以被视为是一个明显的变化.让你即使从智能手机浏览一个网站的时候能轻松地看到网站上的重要内容.今天 ...

随机推荐

  1. Struts2的处理结果(二)——处理结果的类型

    Struts2的处理结果(二) --处理结果的类型 1.Struts2內建的支持的结果类型: 在<result>元素中的type属性,确定了结果类型. chain:Action链式处理的结 ...

  2. Python3基础 count 返回指定元素在列表中的个数

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  3. SqlSever基础 datalength函数 计算前后都有空格的字符串的长度

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  4. 判断List、Map、Set是否为空及效率比较

      //如果object为null,则设置为defaultValue ObjectUtils.defaultIfNull(object, defaultValue); //判断集合是否为null Li ...

  5. BZOJ 3601: 一个人的数论

    题目链接:www.lydsy.com/JudgeOnline/problem.php?id=3601 题意: 思路: 因此可以用高斯消元得到ai. const int mod=1000000007; ...

  6. JAVA的文件创建

    package com.xia; import java.io.*; public class test2 { public static void main(String[] args) { //输 ...

  7. 解决 Eclipse 重写方法时参数为arg0,arg1

    我们在用eclipse 中Alt+ / 补全代码时.方法重写会出现arg0这样可读性差的参数. 原因是没有找到android 的源文件. 一.下载文件 需要下载 sources for android ...

  8. Deep Learning: Activation Function

    Sigmoid Function ReLU Function Tanh Function

  9. 关于Android构建

    “IDE都是给小白程序员的,大牛级别的程序员一定是命令行控,终端控,你看大牛都是使用vim,emacs 就一切搞定” 这话说的虽然有些绝对,但是也不无道理,做开发这行要想效率高,自动化还真是缺少不了命 ...

  10. org.apache.http.client.CircularRedirectException: Circular redirect to "http://xxx"问题解决

      org.apache.http.client.CircularRedirectException: Circular redirect to "http://xxx"问题解决 ...