江苏龙网

  1. 主页 > 生活百科 > >

响应式网页开发设计与实际应用( 四 )

响应式


@media only screen
and (max-width : 320px) {
/* Styles */
}
上面的代码来自于Andy Clark创建的可以兼容各种主流设备的免费模板 。这样整合多个media queries于一个样式表文件的方式，与通过media queries调用不同样式表的方式之间的区别与联系，可以参考”Hardboiled CSS3 Media Queries“一文 。
CSS3 Media Queries
上面演示的一些代码范例是CSS2.1与CSS3通吃的 。现在让我们来看看怎样使用CSS3专有的media queries功能来创建响应式Web设计 。
其中某些方法在当前就有切实的使用价值，不久的将来则一定会全部派上用场 。
min-width和max-width这两个属性很靠谱 。
通过min-width的设置，我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下，为页面指定一个特定的样式表；max-width则反之 。
下面的几个示例中，我们使用的是将多个media queries整合在单一样式表中进行编码的句法 。如前文所述，这样做更加高效，减少请求数量 。
@media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
}
上面代码中定义的类(hereIsMyClass)只有在浏览器或屏幕宽度超过600px时才会有效 。
@media screen and (max-width: 600px) {
.aClassforSmallScreens {
clear: both;
font-size: 1.3em;
}
}
而这段代码的作用则相反：aClassforSmallScreens类只有在浏览器或屏幕宽度小于600px时才会有效 。
可以看出min-width和max-width可以同时判断设备屏幕尺寸与浏览器实际宽度 。
有些时候，我们希望通过 media queries作用于某种特定的设备，而忽略其上运行的浏览器是否由于没有最大化而在尺寸上与设备屏幕尺寸产生不一致的情况 。
这时，我们需要使用min-device-width与max-device-width，用来判断设备本身的屏幕尺寸 。
@media screen and (max-device-width: 480px) {
.classForiPhoneDisplay {
font-size: 1.2em;
}
}
@media screen and (min-device-width: 768px) {
.minimumiPadWidth {
clear: both;
margin-bottom: 2px solid #ccc;
}
}
还有一些其他方法，可以帮我们有效的使用media queries锁定某些指定的设备 。
可以参考下面两篇出自Thomas Maier的文章：
CSS for iPhone 4 (Retina display)
How To: CSS for the iPad
对于iPad来说，orientation属性尤其有用 。它的值可以是landscape(横屏)或portrait(竖屏) 。
@media screen and (orientation: landscape) {
.iPadLandscape {
width: 30%;
float: right;
}
}
@media screen and (orientation: portrait) {
.iPadPortrait {
clear: both;
}
}
不幸的是，这个属性目前确实只在iPad上有效 。对于其他可以转屏的设备，譬如iPhone，可以使用min-device-width和max-device-width来变通实现；详情可以参考”Determine iPhone orientation using CSS“一文 。
我们还可以将上述属性组合使用，来锁定某个屏幕尺寸范围：
@media screen and (min-width: 800px) and (max-width: 1200px) {
.classForaMediumScreen {
background: #cc0000;
width: 30%;
float: right;
}
}
上面的代码可以作用于浏览器窗口或屏幕宽度在800px至1200px之间的所有设备 。
其实，很多设计师和开发者仍会选择使用多个样式表的方式来实现media queries 。如果从资源的组织和维护的角度出发，其益处确实高于效率的损耗的话，那么这样做也完全不坏：
<link rel="stylesheet" media="screen and (max-width: 600px)"
href=https://www.isolves.com/it/wlyx/wzjs/2019-07-16/"small.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)"
href=https://www.isolves.com/it/wlyx/wzjs/2019-07-16/"large.css" />
<link rel="stylesheet" media="print" href=https://www.isolves.com/it/wlyx/wzjs/2019-07-16/"print.css" />
所以呐，凡事没有绝对，最好根据实际情况决定使用media queries的方式 。
比如，对于iPad，我们可以将多个media queries直接写在一个样式表中 。
因为iPad用户随时有可能切换屏幕定向，这种情况下，要保证页面在极短的时间内响应屏幕尺寸的调整，我们必须选择 效率最高的方式 。
Java
Java也是我们的武器之一，特别是当某些旧设备无法完美支持CSS3的media query时，它可以作为后备支援 。
幸运的是，已经有专门的JS库来帮助旧浏览器(IE 5+，Firefox 1+，Safari 2等)支持CSS3的media queries 。
使用方法很简单，下载css3-mediaqueries.js并在你的页面中调用它 。
而下面的代码则演示了怎样使用简单的几行jQuery代码来检测浏览器宽度，并为不同的情况调用不同的样式表：


推荐阅读


上一篇：响应式网站设计的基本原理?

下一篇：深入浅析angular和vue还有jquery的区别