《响应式web设计基础》笔记

1,CSS预处理器(Sass、LESS、Stylus、PostCSS)可以帮我们组 织代码、变量、颜色操作和数学运算。像PostCSS这样的工具可以帮我们完成添加浏览器前缀这 样烦琐的任务。另外,一些清理和验证工具可以帮我们检查HTML、CSS和JavaScript代码是否符 合标准,自动提示输入错误和语法错误。 

2,下载本书示例代码的地址是:http://rwd.education/download.zip或https://git- hub.com/benfrain/rwd

3,利用max-width:100%;可以使得图片始终是自己原来大小的一倍,无论viewport如何变化(除非viewport比图片自身还小,图片会变得和窗口一样大)。而width:100%;使得图片始终占满屏幕。

4,首先是“基本的”样式,它适用于任何设备。在这个样式基 础上,我们再为不同视口、不同能力的设备,渐进增加不同的视觉效果和功能

5,将容器设为display:table,则他成为一个块级表格元素,子元素display:table-cell,则子元素成为表格单元格,然后就像在表格里一样,给子元素加个vertical-align: middle就可以使得多行文字垂直居中

6,媒体查询:orientation:portriat屏幕是垂直的吗

可以组合多个媒体查询。只要其中任何一个媒体查询表达式为真,就会应用样式

 media="screen and (orientation: portrait) and (min-width: 800px), projection

7,可以在使用@import导入CSS时使用媒体查询,有条件地向当前样式表中加载其他样式表。 比如,以下代码会导入样式表phone.css,但条件是必须是屏幕设备,而且视口不超过360像素: 
@import url("phone.css") screen and (max-width:360px); 记住,使用CSS中的@import会增加HTTP请求(进而影响加载速度),因此请慎用。 另外,使用link引入外部样式表支持使用js控制DOM改变样式,@import不行。

8,把媒体查询写在需要它的地方,而不是因为媒体查询的条件相同就把他们组合到一起,这样便于代码维护。而且,在标准样式之后紧接着写媒体查询,根本用不着担 心文件大小,因为事实上gzip 压缩(应该用它来压缩服务器上的所有可以压缩的资源)完全可以把差别降到可以忽略不计的程 度。

9,content="initial-scale=2.0"的意思是“把内容放大为实际大小的两倍”(0.5 就是一半,3.0就是三倍)。后,width=device-width告诉浏览器页面的宽度等于设备的宽度 (width=device-width)。maximum-scale=3, minimum-scale=0.5"允许用户大将页 面放大到设备宽度的三倍,小可以将页面缩小至设备宽度的一半。user-scalable=no完全禁止用户缩放

10,inline-block行内元素总是会产生不易消除的间隔:

*使得父级元素font-size:0;   子级元素font-size:16px;

*使得子级元素margin-right:-5px;

11,如何得到这样的导航栏:

html:

<div class="nav">
<div class="list">home</div>
<div class="list">about us</div>
<div class="list">products</div>
<div class="list">policy</div>
<div class="last">contact us</div></div>

css:

div{
background-color:black;
color:white;
}
.nav{
display:flex;
}
.list{
margin-right:15px;
}
.last{
margin-left:auto;//   auto使得最后一项左边有多大空位置,margin-left就有多少距离
}

猜你喜欢

转载自blog.csdn.net/kalinux/article/details/81411691