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

< type="text/java"
src=https://www.isolves.com/it/wlyx/wzjs/2019-07-16/"http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
< type="text/java">
$(document).ready(function{
【响应式网页开发设计与实际应用】$(window).bind("resize", resizeWindow);
function resizeWindow(e){
var newWindowWidth = $(window).width;
// If width width is below 600px, switch to the mobile stylesheet
if(newWindowWidth < 600){
$("link[rel=stylesheet]").attr({href : "mobile.css"}); } // Else if width is above 600px, switch to the large stylesheet else if(newWindowWidth > 600){
$("link[rel=stylesheet]").attr({href : "style.css"});
}
}
});
</>
类似这样的解决方案还有很多。
所以我们要清楚，media queries不是一个绝对唯一的答案，它只是一个以纯CSS方式实现响应式Web设计思路的手段。
借助Java，我们则可以实现更多的变化。这篇”Combining Media Queries and Java“向我们展示了Java配合media queries的更多细节信息。
显示或隐藏内容
通过前文的学习，我们已经了解到，对于响应式Web设计，同比例缩减元素尺寸以及调整页面结构布局，是两个重要的方式方法。
但是对于页面中的文字内容信息来说，则不能简单的只从”同比缩小”和”调整布局结构”这两方面去处理。
对于手机等移动设备来说，在文字内容方面，已经有了很多最佳实践方式和指导原则：简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。

文章插图
响应式Web设计的思想，一方面要保证页面元素及布局具有足够的弹性，来兼容各类设备平台和屏幕尺寸；另一方面，则是增强可读性和易用性，帮助用户在任何设备环境中都能更容易的获取最重要的内容信息。
有一条样式代码，我们已经使用了多年：
display: none;
我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素，也可以使用前文的方法，通过JS判断当前硬件屏幕规格，在小屏幕设备的情况下直接为需要隐藏的元素添加工具类class 。
比如，对于手机类设备，我们可以隐藏掉大块的文字内容区，而只显示一个简单的导航结构，其中的导航元素可以指向详细内容页面。
注意，不要使用visibility: hidden的方式，因为这只能使元素在视觉上不做呈现；display属性则可帮助我们设置整块内容是否需要被输出。
对于移动设备来说，避免这些不必要的资源浪费还是很重要的。我们来看一个简单的示例：

文章插图
图中上半部分是大屏幕设备所显示的完整页面，下面的则是该页面在小屏幕设备的呈现方式。
页面HTML代码如下：
<p><a href=https://www.isolves.com/it/wlyx/wzjs/2019-07-16/"#">Left Sidebar Content |
<a href=https://www.isolves.com/it/wlyx/wzjs/2019-07-16/"#">Right Sidebar Content

<div id="content">
<h2>Main Content</h2>
</div>
<div id="sidebar-left">
<h2>A Left Sidebar</h2>
</div>
<div id="sidebar-right">
<h2>A Right Sidebar</h2>
</div>
下面是默认的主样式表，其中，我们要隐藏掉链接导航部分(sidebar-nav)，因为默认样式适用的设备屏幕会足够大，足够显示包括两个侧边栏在内的所有内容。
#content{
width: 54%;
float: left;
margin-right: 3%;
}
#sidebar-left{
width: 20%;
float: left;
margin-right: 3%;
}
#sidebar-right{
width: 20%;
float: left;
}
.sidebar-nav{display: none;}
下面是用于小屏幕移动设备的样式表代码。现在，我们要隐藏掉两个侧边栏，并使sidebar-nav显示出来。
借助 Java，当用户点击sidebar-nav中的链接时，对应的侧边栏可以恢复显示。
当然，触发恢复显示的方式有很多种，即可以通过JS改变侧边栏的display属性值，也可以为其添加额外的布局样式。
#content{
width: 100%;
}
#sidebar-left{
display: none;
}
#sidebar-right{
display: none;
}
.sidebar-nav{display: inline;}
现在，我们的页面已经可以随着设备和屏幕规格的变更，响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整。