欢迎各位兄弟 发布技术文章

这里的技术是共享的

响应式设计学习 再一次学 宁皓网2

操作符可以连接媒体类型,还有媒体查询的表达式,比如我们可以把不同的媒体查询表达式组合在一起,使用操作符我们可以创建更复杂的媒体查询。

操作符可以是 and ,也就是 与 … 使用 and 连接的不同的表达式,只有在所有表达式都返回真值的时候,才会触发媒体查询设计的样式 ..

下面我们来试一下这个 and 操作符 ..

在网页的样式里输入

@media (){}

在这个媒体查询里,我们可以使用 and … 连接媒体类型和媒体查询的表达式 … 先输入媒体类型 … 这里我们用 screen … 表示屏幕设备 …

中间加上一个 and 操作符 …

在小括号里输入 min-width: 480px … 然后在大括号里再输入点样式 …

body{
background:#27ae60;
}

这个媒体查询的意思就是,如果媒体类型是 screen … 比如电脑,智能 手机,平板等等 … 同时可视窗口要大于等于 480px … 只有同时满足这两个条件 … 才会应用在后面的大括号里设计的 CSS 样式 …

也就是背景颜色会变成 xx …

保存一下 … 打开浏览器 …

当前的可视窗口宽度大于 480px,并且媒体类型是 screen … 所以会应用媒体查询里设计的 xx 色背景 …

调整可视窗口的宽度 … 小于 480px 以后 … 页面会恢复成最初的样式 … 虽然媒体类型仍然是 screen … 但是可视窗口小于 480px … 这样媒体查询表达式,可视窗口宽度大于等于 480px ,会返回一个假的值 …

因为我们用的操作符是 and .. 所在整个媒体查询就会返回假的值 … 这样页面也就不会再应用设计的 xx 背景样式了 …

我们可以再试一下打印预览 … 文件 … 打印 .. 勾选一下 背景颜色和图片 …

虽然可视窗口尺寸大于 480px … 不过现在媒体类型是 print … 而不是 screen …. 一个条件返回假 … 整个媒体查询也会返回假值 …

所以,也不会去应用设计的 xx 背景样式 …

表达式

下面我们继续使用 and 操作符,去连接其它的媒体查询表达式 … 回到样式表 …

在第一个表达式的后面,再添加一个 and 操作符 … 然后输入一组括号 …. 在括号里 … 可以继续定义媒体查询表达式 …

我们用一个 max-width … 值设置为 767px …

在这条媒体查询里,我们使用 and 操作符,连接了两个媒体查询表达式,还有一个媒体类型 … 只有当他们全部返回真值的时候 … 才会触发应用在大括号里设计的样式 …

也就是,媒体类型是 screen …. 可视窗口的宽度要大于等于 480px … 并且要小于等于 767px …

保存一下… 回到浏览器上 ….

现在可视窗口大于 767px … 页面会使用最初的样式 … 当可视窗口等于或者小于 767px 的时候 … 会触发应用媒体查询里的样式 … 背景会变成 xx 色 …

继续缩小可视窗口的宽度 …. 当可视窗口小于了 480px …. min-width:480px 会返回假 … 整个媒体查询也会返回假 … 页面就又恢复成了原来的样子 ….
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
我们可以使用 , 号分隔开不同的媒体查询 … 这个逗号就相当于是 或 … 也就是使用逗号连接的媒体查询,只要有一条返回真的假 … 就会触发设计的样式 ..

下面我们可以去试一下 … 打开样式表 … 输入

@media screen and (orientation: landscape)

这是一条媒体查询 … 意思是媒体的类型是 screen ,并且使用的方向要是水平方向 …

在这条媒体查询的后面,输入一个逗号 …

然后我们可以继续去定义其它的媒体查询 …

(min-width: 700px) …. 可视窗口宽度大于等于 700px ….

你可以继续使用逗号分隔,来定义其它的媒体查询 … 最后,我们再输入一组大括号 … 再添加点样式 …

用 background 设置 body 标签的背景为一种红色 …

background:#c0392b;

这里我们使用了一个逗号分隔开了两个不同的媒体查询 …. 只要其中的一个媒体查询返回真值 … 就会触发应用大括号里的样式 …

保存 … 回到浏览器 … 刷新 …

现在可视窗口的宽度大于 700px ,所以逗号右边的那条媒体查询会返回真值 … 这样也就会触发应用大括号里的样式 …

背景颜色会使用红色 …

切换到 iOS 模拟器 … 把设备调整为水平方向 …

虽然现在可视窗口的宽度小于 700px … 不过设备的使用方向是水平方向 … 这样第一条媒体查询会返回真值 …

同样会触发应用这个红色的背景 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
not 操作符是否定的意思 … 它可以否定整个媒体查询 … 下面我们通过几个演示来了解一下 not 操作符 …

打开网页的样式表 …

@media screen{
body{
background:#ccc;
}
}

这块代码的意思是,如果输出设备的类型是 screen … 那么就会在 body 标签上,应用一个灰色的背景 …

打开浏览器 … 现在输出的设备是电脑屏幕,媒体查询返回真值,所以页面的背景变成灰色的 …

再回到样式表 … 我们添加一个 not … 这样它的意思就变成了,如果输出设备不是 screen … 才会应用大括号里面的样式 …

保存 … 回到浏览器 … 刷新 … 当前输出设备是 screen … 所以页面背景是最开始的样子 … 下面我们可以打开打印预览看看 …

文件 … 打印 …

当前输出的设备类型是 print .. 并不是 screen … 这样我们设置的媒体查询会返回真 … 也就会应用大括号里的样式 …

回到样式表 … 再去修改一下这个媒体查询 …

@media not screen and (max-width: 959px){
body{
background:#ccc;
}
}

这个 not 操作符会否定整个媒体查询,比如这个媒体查询,会先判断 screen and (max-width: 959px) 返回的值是真还是假 …

然后 .. 再去应用 not 这个操作符 … 也就是,如果 screen and (max-width: 959px) 返回真 … 那么这条媒体查询会返回假 … 也就不会应用设计的样式 …

如果 screen and (max-width: 959px) 返回假… 那么这条媒体查询会返回真 … 也就是,页面会去应用在大括号里设计的样式 …

如果我们在媒体查询里,使用逗号分隔开不同的媒体查询 … not 操作符只会影响到它所在的那条媒体查询,而不是整个用逗号分隔开的媒体查询列表 …

最后,我们要注意的是,如果使用 not 操作符 … 一定要明确的指定媒体的类型 … 不然设置的媒体查询永远都会返回假值 ….

类似的还有一个 only 操作符也是这样的,必须要在它后面指定媒体的类型 … only 这个操作符可以防止不懂媒体查询的浏览器,去应用我们设计的媒体查询里的样式 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~创建响应式设计的布局,我们可以先考虑网页上的内容,为内容的重要程度去排下顺序 … 然后,再去设计一些 Breakpoint … 断点 …

就是你想在哪个点上去改变页面的布局… 比如我们可以在可视窗口宽度大于 1200px 这里,设置一个 Breakpoint … 你可以去设计布局在这个 Breakpoint 上的变化 …

下面可以去试一下 … 打开资料包 xx 里的 … 这里你看到的是一个简单的布局 … (#点击)页头 .. 导航 .. 主体部分 … 边栏 … 还有页脚 …

在网页的样式表里,我事先添加了一些基本的样式 … 设置了布局的整体宽度 .. 是 960px …

浏览到样式表的最下方 …

去添加一个可视窗口大于 1200px 像素的媒体查询 …

@media (min-width:1200px){}

宽度大于 1200px 的屏幕,是比较大屏幕 … 所以在这个点上,我们可以增加页面的整体宽度 …

.container 类所在的元素是包装整个页面的元素 … 设置的宽度是 960px …

在这条媒体查询里,我们可以把 .container 里面的宽度改的大一些 …. 使用 width 属性 … 设置成 1170px …

这样当可视窗口的宽度大于 1200px 的时候 … 页面的整体的宽度会变成 1170px …

然后,我们再去设置一下,主体,还有边栏的宽度 … 因为页面的整体宽度变大了 … 所以主体和边栏的宽度也要随着变化 …

在主体内容上,定义了 #mainbody 这个 ID …. 在上面的样式里,你可以看到 … 它的宽度是 620px …. 这里,我们可以设置成 770px …

它的右边还有一个 20px 的右边距 … 我们让这个边距也变大一些 … margin-right:30px

然后再去设计一下边栏的宽度 … 页面整体宽度在可视窗口大于 1200px 的时候,是 1170px … 去掉主体的 770px ,再加上主体上的 30 个像素的边距 …

所以边栏上宽度应该是 370px …

保存一下 … 回到浏览器 …. 当前可视窗口的宽度是 1xxx ,小于 1200px … 所以页面的宽度仍然是原始的 960px …

调整一下窗口的宽度 … 注意 … 当宽度大于 1200px 的时候 … 会触发应用我们在可视窗口大于等于 1200px 时候所设计的样式 … 页面的整体宽度会变大 ….

主体和边栏的宽度也会变大 …

可视窗口小于 1200px 的时候 … 页面又会恢复成原来的样式 ….

@media (min-width:1200px){
.container{
width:1170px;
}
#mainbody{
width:770px;
margin-right:30px;
}
#sidebar{
width:370px;
}
}

@media (max-width:959px){
.container{
width:100%;
}
#mainbody{
width:67%;
}
#sidebar{
width:30%;
float:right;
}
}

@media (max-width: 767px){
#mainbody{
width:100%;
float:none;
}
#sidebar{
width:100%;
float:none;
}
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
我们可以继续为其它尺寸的设备去设置一些断点 … 比如当可视窗口宽度小于 960px 的时候 … 我们让页面的布局由固定宽度的布局,变成流动布局 …

下面去设计一下这条媒体查询 …

@media (max-width:959px){}

max-width 的意思就是可视窗口宽度小于或者等于 …

先设置页面容器的宽度为 100% … 包装整个页面的容器的上面有一个 .container 类 …

container{
width:100%;
}

这样当可视窗口的宽度小于或等于 959px 的时候 … 页面就会由固定的宽度变成流动的宽度 … 设置一个百分比的宽度值 ,可以把布局变成流动的。

下面再去设置一下主体还有边栏 … 主体上的 ID 是 #mainbody … 我们让主体内容占用 67% 的宽度 …

#mainbody{
width:67%;
}

然后再设置一下边栏的宽度 … 边栏上定义了一个 sidebar ID … 让边栏占用 30% 的宽度 … 这样边栏和主体加起来的宽度是 97% … 剩下的 3% 可以作为边栏和主体之间的间隔 …

我们可以让边栏浮动到右边去显示 …

#sidebar{
width:30%;
float:right;
}

保存 …. 回到浏览器上预览一下 ….

调整可视窗口的宽度 … 当可视窗口小于等于 959px 的时候 … 页面会变成流动布局 … 继续缩小可视窗口的宽度 …. 整个布局也会随着缩小 …

@media (max-width:959px){
.container{
width:100%;
}
#mainbody{
width:67%;
}
#sidebar{
width:30%;
float:right;
}
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
下面我们可以为小尺寸的设备去设置一个断点 … iPad 在垂直状态下,它的宽度是 768px … 我们可以设置在这个宽度以下的媒体查询 … 一般的智能手机垂直或者水平方向的宽度都会小于这个尺寸 …

@media (max-width: 767px){} ….

这条媒体查询的意思就是,如果可视窗口的宽度小于或者等于 767px 的时候 .. 会应用在后面大括号里的样式 …

对于小尺寸的设备来说 … 我们就不需要再把页面分成两栏显示了 .. 可以把它们堆砌在一起 …

这里,我们只需要取消主体和边栏的浮动 … 再把它们的宽度设置成 100% 就行了 ….

#mainbody, #sidebar{
width:100%;
float:none;
}

保存 … 打开浏览器 …

调整一下可视窗口的大小 … 宽度小于等于 767px 的时候 … 主体和边栏会堆砌在一起 ….

再预览一下我们设计的这个布局 …

放大可视窗口的宽度 … 大于 767px 以后,布局恢复成两栏 … 宽度是流动的 …

大于等于 960px 的时候 … 页面布局变成固定的宽度 …

当可视窗口超过 1200px 的时候 …. 布局整体宽度会增加 … 主体和边栏的宽度也会增加 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
响应式设计的导航菜单有很多种形式,最常见的就是切换式的类似下拉菜单一样的响应式导航 … 比如星巴克的网站就使用了这种形式 … 调整浏览窗口的大小 …

注意导航菜单的变化 … 到一定宽度的以后 … 导航菜单就会自动隐藏起来,然后在页面右上角显示一个 三条横线 的小标志 …

点击这个小图标 … 会打开导航菜单 … 点一下这个关闭小图标 .. 可以再把导航菜单隐藏起来 …

我们可以再看一个例子 .. bootstrap …

http://getbootstrap.com/getting-started/

Bootstrap 架构也使用了类似的方法去处理导航菜单 ….

开始

下面我们可以去创建一个类似的响应式的导航菜单 … 这里我们使用纯 CSS 去设计这个响应式的导航菜单,不需要 JavaScript ….

技巧

先大体了解一下我们要做的事,在以前,使用纯 CSS 的下拉菜单 ,会依赖 :hover 这个伪类,也就是先把下拉菜单隐藏起来,然后当鼠标 hover ,悬停在某个元素上面的时候,会弹出下拉菜单 …

不过在移动设备上,这个 hover 悬停就不管用了 …

我们可以换成 target 这个伪类,target 是目标的意思 … 在网页内部,可以使用 ID 作为链接的目标 … 当元素被链接,并且在当前页面点击了这个链接 … 那么就会触发应用元素的 target 伪类的样式 …

这样,我们可以先去添加一个按钮 … 使用 ID 链向导航菜单 …. 先把导航菜单隐藏起来 … 当点击按钮以后 … 会触发应用导航菜单的 target 伪类的样式 …

我们可以为导航菜单的 target 伪类添加样式 … 比如可以让导航菜单显示出来…

然后使用类似的方法,去添加一个关闭导航菜单的按钮 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
下面我们先去添加导航菜单需要的 HTML,如果你很熟悉 HTML,可以直接跳过这节 …

打开网页 … 找到要添加导航菜单的位置 ….

先添加一个 nav 标签 … 在上面定义一个 nav Id .. nav 就是 navigation 的简写,就是导航的意思 … 我的编辑器里安装了 Emmet ,所以可以这样来写 nav#nav

然后是 <ul> 无序的列表标签 … 里面是一些 <li> 标签定义的列表项目 … 这里添加五个 <li> 标签 … 列表里面是 <a> 标签 …

再上面再添加一个 href 属性 … 值可以使用一个占位符 … 加上一个 # 号 … 再每个项目上再添加点文字 …

然后按一下 tab 键 ….

nav#nav>ul>li*5>a[href="#"]{项目 $}

按钮

下面我们需要准备两个按钮 … 一个是打开导航用的按钮,一个是关闭导航用的按钮 … 按钮上的图标可以使用 font awsome (http://fontawesome.io/ ) … Get Started …

直接使用 BootstrapCDN 上的 font-awesome … 复制一下这行代码 ….

回到网页 … 粘贴到 <head> 标签上 … 这样就可以使用 font awecome 上面的图标了 …

先处理一下开启导航菜单的小图标 …

再回到 font awesome … 点击 icons … 在这里你可以找到想要使用的图标 … 搜索一下 reorder … 点击这个小图标 …

然后复制显示这个小图标的代码 … 回到网页 … 粘贴 …

页面上会显示一个三条横线的小图标 … 再去给它添加一个 <a> 标签 … 让它链向 #nav 这个 ID …

一个 a 标签… 一会要给它添加样式,所以可以在上面定义一些类 … 添加一个 open 类 … 同时再添加一个 toggle-btn 类 … 然后是 href 属性 … 属性的值是 nav 这个 ID …

a.open.toggle-btn[href="#nav"]

把显示小图标的代码放在这组 <a> 标签的里面 …

关闭

再去找一个关闭按钮 … 搜索 remove … 选择这个 … 复制一下显示小图标的代码 … 回到网页 …

这个关闭按钮,把它放在 <nav> 标签的里面 …

再去给它添加一组 <a> 标签 …

一个 a 标签 … 定义一个 close 类 .. 再加上一个 toggle-btn 类 … href 属性 .. 属性的值是 #top …

a.open.toggle-btn[href="#top"]

把小图标放在这组 <a> 标签里面 …

然后在 <body> 标签上,定义一个 top 的 id …

完成

现在,我们就准备好了导航菜单需要的所有的 HTML 代码 …. 下面视频,我们再去给它们添加一些样式 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
打开网页的样式 … 下面去定义一下导航菜单的样式 … 先输入一行注释 … command + / 导航菜单

先去掉无序列表的列表样式还有边距 ….

ul{}

lis:n … list-style 设置为无 …

pd0 padding 设置为 0 …

另起一行 … 再设置一下导航菜单下面的 li 标签,还有 a 标签的样式 …

#nav li, #nav li a{

}

把他们都设置为行内的块级元素 … d:ib

添加点内边距 … pd7px15px ….

去掉下划线 … td ..

设置一下文字的颜色 … co ---- 3b3b3b ,color:#3b3b3b;

hover 样式

再定义一下鼠标悬停在菜单项目上的样式 …

#nav li a:hover{}

可以使用 background 添加一个背景 … bg ….. #eee 在浏览器上预览一下 ….

.active

被激活的菜单项可以单独去设置一种样式 … 先回到网页的代码 … 找到一个菜单项目 … 在上面添加一个 .active 类 …

回到样式表 … #nav 下面的 .active

#nav .active{}

设置一下背景的颜色 …. bg …. #eee

隐藏按钮

下面我们去把页面上的切换导航菜单显示的按钮隐藏起来 … 因为我们只想让它们小尺寸的屏幕上显示出来 …

在按钮上,都添加了一个 toggle-btn 的类 …

.toggle-btn{}

dis:n ...

现在导航菜单的基本样式就设计好了 …

/* Navigation */
#nav{
background:none;
text-align:left;
}

#nav li, #nav li a{
display:inline-block;
padding:7px 15px;
text-decoration:none;
color:#3b3b3b;
}
#nav li a:hover{
background:#eee;
}
#nav .active{
background:#eee;
}

/* 隐藏按钮 */
.toggle-btn{
display:none;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
在小尺寸的屏幕上,我们要让切换按钮显示出来,然后把导航菜单隐藏起来,让它只有在点击切换按钮的时候,才会显示或者隐藏 ….

先把可视窗口的宽度调整为小于 767px ….

然后回到网页的样式表 …. 找到为小尺寸屏幕设计的媒体查询 …. 就是这个 max-width:767px …. 当可视窗口宽度小于等于 767px 的时候,会使用这里定义的样式 …

输入一行注释 … command + / … 切换按钮 …

按钮上都有一个 toggle-btn 类 … .toggle-btn{}

先让它显示出来 … d:ib ….

修改一下大小 .. 因为使用的是 font awesome 小图标 … 所以可以通过设置文字的大小来设置小图标的大小 …

fz25 ….

去掉下划线 … td ..

添加一个黑色的背景 ...bg#000

设置下文字的颜色 … co…. #fff

加点内边距 .. pd7px10px

设置它们的位置为绝对的位置 … posa

右边的位置是 10px r10 …

顶部的位置设置为 50px … t50 ….

现在两个按钮会重叠在一起 …. 关闭按钮会覆盖开启导航菜单的按钮 …

我们要做的是,先隐藏关闭按钮,显示开启按钮 … 点击开启按钮时,再用关闭按钮覆盖开启按钮 …

先把关闭按钮隐藏起来 …

/* 隐藏关闭按钮 */

#nav .close{}

dis:n

然后再设置一下,导航为目标状态的时候,也就是点击了开启按钮的时候 … 把这个关闭按钮显示出来 ..

/* 导航为目标状态时显示关闭按钮 */
#nav:target .close{
display: inline-block;
}

d:ib

到浏览器上预览一下 … 当前显示的是开启按钮 …. 关闭按钮是隐藏的状态 …

点一下这个按钮 … 导航菜单会处于目标状态 … 这样会应用样式 … 把关闭按钮显示出来 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
下面我们再处理一下在小尺寸屏幕上的导航菜单的样式 … 先把导航菜单的初始状态设置为隐藏 …

d:n

/* 隐藏导航 */
#nav{
display:none;
}

然后再设置一下当导航菜单为目标状态的时候的样式 … 先回到浏览器 … 点击一下开启按钮 …

这样会链向导航菜单上的 #nav 这个 ID,现在导航菜单的 <nav> 标签就会处于目标状态 … 这个时候,我们就可以使用 target 这个伪类为它添加样式了 …

/* 导航为目标状态时的样式 */
#nav:target{}

先把导航显示出来 … db …

把它的位置设置为绝对 … posa …

顶部的位置设置为 0 t0 ….

最上面添加点内边距 … pt70 ….

宽度设置成 100% … w100p …

ul 的样式

下面再去给导航下面的<ul> 标签添加点样式… 同样把样式添加到目标状态下的导航菜单 …

/* 目标状态下的导航的 ul 标签 */

#nav:target ul{}

添加一个黑色的背景 … bg#000

li 与 a

下面我们再去为目标状态下的导航菜单的 <li> 标签 ,还有 <a> 标签去定义一些样式 …

/* 目标状态下导航的列表与 a 标签 */
#nav:target li, #nav:target li a{}

把它们都设置成块级元素 … db …

改一下文字的颜色 … color: #eee; 再设置一下文字的方向 ta:l

悬停样式

修改下悬停的样式 ….

/* 目标状态下导航的列表下的 a 标签的悬停样式 */
#nav:target li a:hover{
background: #3b3b3b;
}

还有激活的样式 …

/* 目标状态下导航的激活状态样式 */
#nav:target .active{
background: #272727;
}
….

回到浏览器 …

点击 关闭 … 导航菜单的 <nav> 标签就不会再处于目标状态了 … 所以它会隐藏起来 …

按钮会从关闭按钮,变成 开启 的按钮 … 因为关闭按钮只有在导航菜单处于目标状态的时候才会显示出来 …

现在我们的响应式导航菜单就做好了 …

调整一下可视窗口的宽度 …

大于 767px 以后 … 导航菜单会恢复成最开始的样式 …

缩小窗口的宽度 … 小于 767px 以后 .. 导航菜单会隐藏起来 .. 同时在右上角会显示一个开启导航菜单的按钮 …

点击这个按钮,可以打开导航菜单 …. 点击 关闭按钮 … 可以关掉导航菜单 ...

/* 导航为目标状态时的样式 */
#nav:target{
position: absolute;
width: 100%;
padding-top:70px;
top: 0;
display: block;
height:auto;
}
/* 目标状态下的导航的 ul 标签 */
#nav:target ul{
background: #000;
width: 100%;
}
/* 目标状态下导航的列表与 a 标签 */
#nav:target li, #nav:target li a{
display: block;
color: #eee;
}
/* 目标状态下导航的列表下的 a 标签的悬停样式 */
#nav:target li a:hover{
background: #3b3b3b;
}
/* 目标状态下导航的激活状态样式 */
#nav:target .active{
background: #272727;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
这个视频我们来看一下响应式的图像 … 先打开网页 …. 插入一张图像 ... 可以把它放在一个 <div> 标签上 …. 在上面定义一个叫 showcase 的 ID ..

里面是图像的 <img> 标签 … 再添加一个 src 属性 … 指定图像的位置 …. 插入在 images 目录下的 01.jpg 这个图像 …

保存 … 打开浏览器 …

因为图像比较大 … 所以会超出布局的宽度 … 调整可视窗口的大小 … 图像的宽度也没有什么变化 …

其实让页面上的图像跟着布局的宽度的变化而变化很简单 …. 只需要把图像的宽度设置成 100% 就行了 ..

样式

打开网页的样式表,可以使用图像的标签作为样式的选择器 img {}

w100p

如果你想确定图像不会被拉伸的话,可以再加上一个 max-width:100%
保存 … 回到浏览器 …

现在图像的宽度正好是包装它的容器的宽度 …

调整一下窗口的宽度 …. 你会发现 … 图像的宽度也会随着变化 …

背景

如果页面上的图像不是用 <img> 标签插入的 … 而是背景 … 同样可以让它变成响应式的 …

回到网页 … 去掉这个 #showcase 下面的 <img> 标签 …

打开网页的样式表 …

为 #showcase 添加一个背景 … #showcase{}

先给 showcase 容器指定一个高度 … h500

然后用 background 设置背景图像 … bg+ …. images/01.jpg …. 修改一下背景图像的位置 … 50% 50% … 让它垂直居中 …

最后我们需要添加让背景变成响应式设计的最关键的样式 .. 设置背景尺寸为 100% …

bgsz100p

这里编辑器为我们添加了两条样式 … background-size 是标准的写法 … 前面带 -webkit- 表示这是专门针对 webkit 核心的浏览器的样式 … 这样做是为了更好的兼容性 …

保存一下 ..

回到浏览器 ….

背景的宽度跟容器的宽度一样 …. 高度是我们设置的容器的高度 … 500px

调整窗口的尺寸 ….

背景图像的宽度也会随着变化 …. 不过这里会出现一个问题 …. 因为们设置了 shoecase 容器的固定的高度 …

当可视窗口宽度比较小的时候 … 会造成背景图像的上面和下面留出很多的空白 …

在下面的视频里,我们再来解决这个问题 ….

#showcase{
height: 500px;
background: #fff url(../images/01.jpg) 0 50% no-repeat;
-webkit-background-size: 100%;
background-size: 100%;
}
把 background-size: 100%; 改成   background-size: cover;
#showcase{
  background-image: url(../../images/01.jpg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-background-size: 100%;
    /* height: 500px;
    background-size:100%; */
  background-size: cover;
    
  margin-bottom: 20px;
  padding-top: 56%;  
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
解决背景图像的比例问题,我们可以使用一个跟图像比例一样的上边的内边距,把它应用在包装背景图像的元素上 …

先计算一下 … 我们要作为背景的图像,宽是 1366px,高度是 768px … 用高度除以宽度 … 得到的结果约等于 0.56 …

换算成百分比,应该就是 56% ….

打开网页的样式表 … 修改一下包装背景图像的 #showcase 的样式 …

先去掉这个固定的高度 … 然后添加一个 padding-top … 值就是刚才算出来的图像的比例 … 56% …

pt56p

保存 … 回到浏览器 …

调整窗口的宽度 … 现在的背景图像还有包装它的元素 … 就会按照一定的比例进行缩放 …

不过这里还有一个问题 …

并不是所有的图像高与宽的比例都是 56% … 解决的办法就是,把 background-size .. 设置为 cover …

意思就是 .. 背景图像会填满包装它的容器 … 并且会保持图像的比例去缩放 …

回到样式表 … 把这个 background-size:100% … 修改成 cover …

这样,如果背景图像的比例不一样 … 或者,我们使用不同的比例 … (修改 padding-top )

背影图像都会保持原有的比例,填满整个容器显示 ….
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
响应式的图像不仅仅只是图像比例显示的变化 … 还有些问题我们需要解决,比如一张 1200像素 以上的图像,使用前面视频介绍的方法。

它可以很好的显示在小屏幕的设备上,但是对于这些小屏幕的设备来说,这么大的图像有点浪费。

图像的像素越大,体积也就越大,页面载入的速度也会慢一些 …

如果手机的接入互联网的方式是 WIFI,这种情况还没那么糟,因为 WIFI 的速度还是非常快的 …

但如果用的是 3G 网络,或者其它的移动网络,加载一张 1200px 的图像就会比较痛苦了。

所以,我们尽量在小尺寸的设备上使用小一些的图像。

在接下来的视频里, 我们再去一步一步的,去解决这个问题。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
如果图像是背景图像话,使用媒体查询,可以根据可视窗口的尺寸来决定使用的背景图像 …

这里我准备了一张 480px 的背景图像 … 为了区别一下 … 在图像上,我添加了一个标示 …

决定把这张背景图像,应用在可视窗口宽度小于或者等于 480px 的时候 …

我们先去改造一下 showcase 里的背景的样式的写法 …

bgi

bgp50p50p

bgrn

background-image: url(../images/01.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;

这样的话,在其它的媒体查询里,我们可以直接使用 background-image ,去覆盖掉默认的背景图像 ….

在样式表的最下面,去定义一个媒体查询 … @media (max-width:480px){}

当可视窗口小于或者等于 480px 的时候 … 应用在大括号里定义的样式 …
#showcase{}

bgi ..images/01_s.jpg …

我们把背景图像改成了 01_s.jpg … 这张图像的宽度是 480px …. 保存一下 ….

打开浏览器 … 调整窗口宽度 … 窗口宽度小于等于 480px 的时候 … 背景图像会变成 01_s.jpg 这张图像 …

下面我们使用 iOS 模拟器,去预览一下 ….

现在用的是普通屏幕的 iPhone … 垂直状态下,它的宽度是 320px … 所以,会使用 480px 的背景图像 …

调整成水平方向 … 这样,设备的宽度就变成了 480px ,也会应用 480px 的背景图像 …

下面我们换成 Retina 屏幕的 iPhone 去试试看 …

同样会使用 480px 的背景图像… 不过 Retina 屏幕的 iPhone ,垂直状态下,水平可以显示 640 个像素 ….

而我们的背景图像的宽度是 480px .. 所以,你会发现 … 图像会被拉伸 …. 这样会变得有点模糊 ….

下面视频,我们再去解决这个问题 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
对于大密度屏幕的设备,比如视网膜屏幕的 iPhone … 图像如果想要显示的清晰,我们可以使用两倍宽度的图像,比如你想让一张图像在 480px 这个宽度显示的清晰,你需要准备一张 960px 宽的图像。

对于 iPhone 来说,这个比例是两倍,不过有些设备,它的屏幕密度可能会更高 … 那么这个倍数就会增加…. 有可能是 3 倍 … 或者更高 …

这个倍数,就是之前我们介绍的 CSS 像素比例,或者设备像素比例 …

这里我准备了一张 960px 宽的背景图像 … 把它应用在可视窗口小于等于 480px 并且 CSS 像素比例大于等于 2 的设备上 …

媒体查询

打开样式表,在样式的最下面 … 先去设置一条媒体查询 … @media 括号 .. max-width 是 480px … 还要加上一个条件,中间用 and 连接 …

括号 … min-resolution:2dppx … 这里是标准的写法 … 使用 resolution 这个媒体特性 … 单位用的是 dppx … 代表 CSS 像素的比例 …

因为 webkit 核心的浏览器还不认识这个 resolution … 所以我们要用 device-pixel-ratio 来代替….

中间我们使用一个逗号分隔一下不同的媒体查询 … 这个逗号就表示 或 ….

max-width:480px …. and …. 括号 … 前面加上 -webkit- 这个前缀 … min-device-pixel-ratio:2 ….

@media (max-width:480px) and (min-resolution:2dppx), (max-width:480px) and (-webkit-min-device-pixel-ratio:2){
#showcase{
background-image: url(../images/01_s_2x.jpg);
}
}

这样,不管哪条媒体查询返回真 … 都会应用在大括号里的样式…

在这里,重新定义一下 #showcase 的背景 …. 背景图像是 01_s_2x.jpg … 这是一张 960px 宽的图像 …

保存 ….

打开浏览器 …. 缩小可视窗口的宽度 … 当小于等于 480px 的时候 … 背景图像会使用 480px 宽的图像 …

因为我们的屏幕的 CSS 像素比例是 1 …

再打开 iOS 模拟器 … 现在我们用的是视网膜屏幕的 iPhone … 它的 CSS 像素比例是2 …. 当前的可视窗口宽度是 320px ,小于 480px,

两个条件都符合 …

所以,你会看到 …. 会使用 960px 的背景图像 ….
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
https://github.com/scottjehl/picturefill

这个视频我们再来看一下使用 <img> 标签的响应式图像,这里我们要使用一个小插件 … picturefill … 它可以让我们在页面中指定多个版本的图像…

使用媒体查询来判断到底要用哪一个版本的图像 …

安装

先去下载 picturefill … 打开这个地址 … 点击 Download Zip …

解压一下 … 找到里面的 picturefill.js … 把它放在我们的网页项目里 … 你可以使用资料包的 xx-xx 这个目录下的项目 …

新建一个 js 文件夹 …

回到网页 … 在 <head> 标签里 … 去嵌入 picturefill.js 这个脚本文件 ...

script:src … 位置是在 js 目录下的 picturefill.js

使用

下面我们在 showcase 这个容器里去添加图像 ….

这里我们不直接使用 <img> 标签插入图像… 而是使用 <span> 标签来代替 …

先定义一组 <span> 标签 …. 然后在这个标签上,添加一个 data-picture 属性 …

再添加一个 data-alt 属性 …. picturefill 会把这个标签替换成 <img> 标签 … data-picture 这里会替换成 <img> 标签的 src 也就是 source 属性 ….

在里面会使用对应版本的图像 ….

data-alt 属性就相当于是 <img> 标签的 alt 属性 … 也就是图像的代替文本 …

在这组 <span> 标签里 … 可以添加不同版本的图像 …

同样使用 span 标签来指定图像的来源 … 里面再加上一个 data-src 属性 … 还有 data-media 属性 …. 这里我们需要三组这样的标签 ….

span[data-src][data-media]*3

data-src 属性的值就是图像的来源 … 在第一组 <span> 标签里,我们可以指定一个默认的图像 … images/01.jpg …

后面的 data-media 属性 … 可以去设置媒体查询 …. 这个原始的图像,可以去掉这个属性 …

在第二组 <span> 标签里 … 我们让可视窗口宽度小于等于 480px 的时候,使用这里指定的图像来源 …

先在 data-src 里输入这个图像的位置 …. images/01_s.jpg …

然后在 data-media 里,去设置媒体查询 …. (max-width:480px) ….

最后一组 <span> 标签,去设置在高清屏幕 .. 也就是视网膜屏幕下,可视窗口宽度小于等于 480px 的时候的图像 …

先定义图像的位置 … images/01_s_2x.jpg ….

再去设置媒体查询 …. (max-width:480px) and (-webkit-min-device-pixel-ratio:2) …

保存一下 ….

打开浏览器 …

在 showcase 这里,会显示原始的图像 … 也就是在第一组 <span> 标签里指定的图像来源 …

调整浏览器窗口的宽度 …

可视窗口小于等于 480px 的时候 … 会使用在第二组 <span> 标签里指定的图像 …

下面我们再打开 iOS 模拟器 …

这是模拟视网膜屏幕的设备 …

你会看到,页面上会使用在第三组 <span> 标签里指定的 宽度是 960px 的图像 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
https://github.com/bradbirdsall/Swipe

下面我们一起去做一个触摸友好的幻灯片 … 在你的 iPhone 或者 iPad 上,你可以左右扫动手指来控制幻灯片的显示 …

这里我们需要用到一个小插件 …. swipe js …. 先去下载它 …

点击 Download Zip …

解压一下 … 把 swipe.js 这个文件放在我们的网页项目里 … 你可以使用课程资料包里的 xx-xx 这个项目..

放在 js 目录下 …

打开网页 … 先在 <head> 标签上嵌入这个 js 文件 …

script:src … js/swipe.js …

HTML

下面我们可以去准备 Swipe 幻灯片需要的 HTML 代码结构 … 回到 swipe 项目的网页 … 可以直接复制这个结构 ….

回到网页 … 粘贴在 showcase 这个 <div> 标签里面 …

幻灯片的最外边的容器上需要定义一个 id … 这里是 slider … 你可以修改成其它的 id … 一会在初始化幻灯片的时候,需要用到这个 id …

同时这个容器上,还添加了一个 swipe 的类 … 我们需要用到它去添加一些样式 …

它的里面又是一组 <div> 标签 … 上面有一个 swipe-wrap 类 … 同样需要用它去应用一些样式 …

然后就是每一个幻灯片项目 … 每个项目都可以放在各自的 <div> 标签里 …

我们可以去为每个幻灯片项目里都添加一张图片 …

img …. 01.jpg … 02.jpg ….

CSS

下面要去为幻灯片添加些必要的样式 … 回到 swipe 项目页面 … 复制一下这块必要的样式 …

打开网页项目的样式表 …

输入点注释 … Swipe … 把样式粘贴到下面 ….

初始化

想让这个幻灯片工作,我们还得告诉 swipe … 幻灯片所在的容器 … 这里需要用到一行 js 代码 … 回到 swipe 项目的页面 … 复制一下这行代码 …

回到我们自己的网页项目 .. 可以把刚才复制的代码粘贴到页面的最下面 …

先输入一组 <script> 标签 … 粘贴过来 ….

这里的 getElementByID 后面的括号里的字符 … 就是在幻灯片容器上定义的 ID … 如果你修改了容器上的 ID ,在这里,可以把这个 slider … 改成你修改之后的 ID …

演示

现在,我们的幻灯片应该就可以工作了。

打开 iOS 模拟器 …

这里我们可以使用鼠标拖拽的方式来模拟手指的左右扫动 ….

使用这种方式,可以控制幻灯片的显示 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
下面我们去给幻灯片添加两个控制按钮 … 用户点击这些按钮,可以向前或者向后翻阅幻灯片的内容 … 先去准备一下需要的 HTML …

先添加一组 <div> 标签 … 可以把它放在幻灯片容器的里面 …

上面加上一个叫 slider-control 的类 … 一会儿我们需要用它来给控制按钮添加样式 …

div.clider-control

在它的里面,再添加一个向前翻阅幻灯片的按钮 … 可以使用 <button> 标签 … 上面添加一个叫 left 类 … 再加上一个 onlick 的属性 … 属性的值是 mySwipe.prev() … 这样这个按钮就可以向前翻阅幻灯片了 …

在 <button> 标签里 … 可以加上一个 font-awsome 的小图标 … 这里我们可以使用 icon-angle-left 这个小图标 … 是一个向左的箭头 …

button.left.[onlick="mySwipe.prev()"]>i.icon-angle-left

下面我们再去添加向后翻阅幻灯片的按钮 … button 标签 … 添加一个 .right 类 … 加上 onclick 属性 … 值是 mySwipe.next() … 然后是一个小图标 … 使用 icon-angle-right … 一个向右的小箭头...

button.left.[onlick="mySwipe.next()"]>i.icon-angle-right

预览

打开浏览器 …

在幻灯片的下面,会显示两个按钮 … 点击向右的箭头可以向后翻阅幻灯片 ….

点击向左的箭头,可以向前翻阅幻灯片 …

下面视频我们可以去给这些按钮添加点样式 … 让它们更好看,更易用
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
先去单独设置一下向后翻阅幻灯片的按钮 … .slider-control .left{} …

把按钮设置为绝对定位 …. 因为在 .swipe 类里,设置了相对位置 .. 所以这个按钮会相对于幻灯片进行绝对定位 …

posa … position: absolute;

左边的位置设置为 20px …

l20 ……. left:20px;

顶部的位置设置可以使用百分比来设置 … 这里我们设置成 45% … 大概是垂直居中于幻灯片 ….

t45p ….. top: 45%;

类似的方法,再设置一下向后翻阅幻灯片的按钮的样式 …

.slider-control .right{}

设置为绝对定位 … posa ….

右边的位置设置为 20px … r20

顶部的位置设置成 45% …. t45p

整体样式

下面再去设计一下这两个按钮的整体的样式 … .slider-control button{}

宽度设置成 50px … w50

高度也是 50px … h50

修改一下字号 … fz20 … 使用 20px

把指针设置成手形 … cur

添加一个黑色的背景 … bg#000

文字的颜色改成白色 … co … #fff;

添加一个 3 像素的白色的边框 … bd+ …. 3px …. #fff

再给按钮添加一个圆角效果 … 这里我们把圆角设置成 50% … 这样会得到一个圆形 …

bdrs …. command shift r

再让它有点透明度 … op0.7

下面我们可以让按钮在默认状态下隐藏起来 … 然后当鼠标放在幻灯片上面的时候,才会显示按钮 …

dis:n …

.swipe:hover button{}

ds …

最后,我们再给按钮本身去添加一个鼠标悬停的效果。

.slider-control button:hover{
opacity: 0.5;
}

这样鼠标放在按钮上面的时候,按钮会变得更透明一些 …

保存 …

下面去浏览器上试一下 ….

默认不会显示控制按钮 …

鼠标放在幻灯片上面的时候才会显示 ….

点击按钮 … 可以控制幻灯片的播放 …

.slider-control button{
width: 50px;
height: 50px;
font-size: 20px;
cursor: pointer;
background: #000;
color:#fff;
border: 3px solid #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
opacity: 0.7;
}

.slider-control button:hover{
opacity:0.5;
}

.slider-control .left{
position: absolute;
left:20px;
top: 45%;
}

.slider-control .right{
position: absolute;
right: 20px;
top: 45%;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
前面我们创建了一个在移动设备上,可以用手指控制的幻灯片。不过现在遇到了点小问题。

当我们开启响应式导航的时候,导航菜单的内容会被这个幻灯片覆盖住 。

其实解决这个问题,一般我们只需要在被覆盖的元素上,添加一个足够大的 z-index 值就行了。

比如这里, 被覆盖的元素是这个 nav 标签里的东西 ... 所以,我们可以为这个元素添加一个大的 z-index ....

你可以使用 chrome 的开发者工具调试一下 ...

比如这个 nav 标签上有一个 nav 的 id ... 在右边找到 nav id 相关的样式 ...

点击空白的地方 ... 添加一条样式 ...

z-index : 9999 ...

左边页面上,会实时显示应用这个样式的结果 ... 现在这个导航菜单就会跑到幻灯片的上一层来显示了。

确定以后,我们可以把这条样式,添加到样式表里 ....

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
在实施真正的响应式设计的时候,我们可以选择一个框架,比如 Bootstrap .... 或者 foundation

这些架构可以让我们的工作变得更轻松一些 ....

另外,如果你想找点灵感的话,可以去 http://mediaqueri.es/ .... 或者 http://responsive.cn/ 去看看

最后,非常非常感谢您的收看,还有对宁皓网的支持 ....

希望能早天看到你的作品。这里是宁皓网 ... 我是王皓 ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
唯物品评历史

关注"唯物品评历史",跟着泪痕春雨先生,读懂历史,看彻人生

打开隐藏二维码