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

禁用iPhone中的图片自动缩放
在iPhone及iPod Touch中，页面会被自动的同比例缩小至最适合屏幕大小的尺寸，x轴不会产生滚动条，用户可以上下拖拽浏览全部页面，或在需要的时候放大页面的局部。
这里会产生一个问题，即使我们运用响应式Web设计的思想，专门为iPhone的小屏输出小图片，它同样会随着整个页面一起被同比例缩小，如下图左侧所示。

文章插图
我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的部分添加以下代码(详情可以参考)：
<meta name="viewport" content="width=device-width; initial-scale=1.0">
将initial-scale的值设定为”1″，即可覆写默认的缩放方式，保持原始的尺寸及比例。更多关于viewport meta标记的用法，可以参考苹果官方的文档。
打造布局结构
当页面所需要适应的不同设备的屏幕尺寸差异过大时，除了图片方面，我们也应该考虑到整个布局结构的智能化调整；我们可以使用独立的样式表，或者更有效的，使用CSS media query 。
这不会引起多大的麻烦，多数样式设定不会被影响和改变，只有一些特定的元素会通过浮动、宽度和高度等的设置来改变位置。
我们可以使用一个默认主样式表来定义页面的主要结构元素，比如#wrApper、#content、#sidebar、#nav等的默认布局方式，以及一些全局性的配色和字体方案。
我们可以监测页面布局随着不同的浏览环境而产生的变化，如果它们变的过窄过短或是过宽过长，则通过一个子级样式表来继承主样式表的设定，并专门针对某些布局结构进行样式覆写。我们来看下代码示例：
下面的代码可以放在默认主样式表style.css中：
/* Default styles that will carry to the child style sheet */
html,body{
background...
font...
color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* Structural elements */
#wrapper{
width: 80%;
margin: 0 auto;
background: #fff;
padding: 20px;
}
#content{
width: 54%;
float: left;
margin-right: 3%;
}
#sidebar-left{
width: 20%;
float: left;
margin-right: 3%;
}
#sidebar-right{
width: 20%;
float: left;
}
下面代码可以放在子级样式表mobile.css中，专门针对移动设备进行样式覆写：
#wrapper{
width: 90%;
}
#content{
width: 100%;
}
#sidebar-left{
width: 100%;
clear: both;
/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}
#sidebar-right{
width: 100%;
clear: both;
/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}*/
大致的视觉效果如下图所示：

文章插图
Media Queries
CSS3支持CSS2.1所支持的所有媒体类型，例如screen、print、handheld等，同时添加了很多涉及媒体类型的功能属性，包括 max-width(最大宽度)、device-width(设备宽度)、orientation(屏幕定向，横屏或竖屏)和color 。在CSS3发布之后出现的新玩具，如iPad或Android相关设备，都可以完美的支持这些属性。所以我们可以通过media query为新设备设置独特的样式，而忽略那些不支持CSS3的台式机中的旧浏览器。
在Ethan的文章中，我们能看到一段media query使用实例：
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href=https://www.isolves.com/it/wlyx/wzjs/2019-07-16/"shetland.css" />
代码本身可以很好的说明工作机制：如果页面通过屏幕呈现(非打印一类)，并且屏幕宽度不超过480px，则加载shetland.css样式表。要了解更多关于CSS3媒体新属性的信息，可以参考”The Orientation Media Query“一文。
我们可以创建多个样式表，以适应不同设备类型的宽度范围。Ethan的文章中的”Meet the media query”部分有更多的范例及解释。更有效率的做法是，将多个media queries整合在一个样式表文件中：
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */