推荐：响应式网站设计与应用

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。如果从资源的组织和维护的角度出发，其益处确实高于效率的损耗的话，那么这样做也有效不坏：

所以呐，凡事没有绝对，较好根据实际情况决定使用media queries的方式。比如，对于iPad，我们可以将多个media queries直接写在一个样式表中。因为iPad用户随时有可能切换屏幕定向，这种情况下，要页面在极短的时间内响应屏幕尺寸的调整，我们必须选择 效率较高的方式。

JavaScript

JavaScript也是我们的武器之一，特别是当某些旧设备无法好支持CSS3的media query时，它可以作为后备支援。幸运的是，已经有专门的JS库来帮助旧浏览器(IE 5+，Firefox 1+，Safari 2等)支持CSS3的media queries。使用方法很简单，下载css3-mediaqueries.js并在你的页面中调用它。

而下面的代码则演示了怎样使用简单的几行jQuery代码来检测浏览器宽度，并为不同的情况调用不同的样式表：

类似这样的解决方案还有很多。所以我们要清楚，media queries不是一个绝对先进的答案，它只是一个以纯CSS方式实现响应式Web设计思路的手段。借助JavaScript，我们则可以实现更多的变化。这篇”Combining Media Queries and JavaScript“向我们展示了JavaScript配合media queries的更多细节信息。

显示或隐藏内容

通过前文的学习，我们已经了解到，对于响应式Web设计，同比例缩减元素尺寸以及调整页面结构布局，是两个重要的方式方 法。但是对于页面中的文字内 容信息来说，则不能简单的只从”同比缩小”和”调整布局结构”这两方面去处理。对于手机等移动设备来说，在文字内容方面，已经有了很多较佳实践方式和指导 原则：简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。

响应式Web设计的思想，一方面要页面元素及布局具有足够的弹性，来兼容各类设备平台和屏幕尺寸；另一方面，则是增强可读性和易用性，帮助用户在任何设备环境中都能更容易的获取较重要的内容信息。

有一条样式代码，我们已经使用了多年：

display: none;

我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素，也可以使用前文的方法，通过JS判断 当前硬件屏幕规格，在小屏幕设备的情况下直接为需要隐藏的元素添加工具类class。比如，对于手机类设备，我们可以隐藏掉大块的文字内容区，而只显示一 个简单的导航结构，其中的导 航元素可以指向详细内容页面。

注意，不要使用visibility: hidden的方式，因为这只能使元素在视觉上不做呈现；display属性则可帮助我们设置整块内容是否需要被输出。对于移动设备来说，避免这些不必要的资源浪费还是很重要的。我们来看一个简单的示例：

图中上半部分是大屏幕设备所显示的完整页面，下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下：

Left Sidebar Content | Right Sidebar Content 
Main Content
A Left Sidebar
A Right Sidebar

下面是默认的主样式表，其中，我们要隐藏掉链接导航部分(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显示出来。借助 JavaScript，当用户点击sidebar-nav中的链接时，对应的侧边栏可以恢复显示。当然，触发恢复显示的方式有很多种，即可以通过JS改变 侧边栏的display属性值， 也可以为其添加额外的布局样式。

#content{    width: 100%;}#sidebar-left{    display: none;}#sidebar-right{    display: none;}.sidebar-nav{display: inline;}

现在，我们的页面已经可以随着设备和屏幕规格的变更，响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整。特 别是对于手机设备，我们还要 在实践过程中注意一些该类设备共有的设计指导原则。比如，针对手机设备，使用一个特定的样式，将页面原有的文字导航元素变为更易操作的图标形式。下面的一 些文章资源可作参考阅读：

Mobile Web Design Trends For 2009

7 Usability Guidelines for Websites on Mobile Devices

触屏与鼠标

触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品，比如手机，但是市场上越来越多的大屏幕设备也开始使用触屏技术；且不说iPad一类的平板电脑，就连一些笔记本和台式机也加入了这一行列。比如HP Touchsmart tm2t，即使用传统的键鼠设备，同时也加入了触屏技术。

相比于传统的基于鼠标指针的互动，触屏技术显然带来了截然不同的交互方式与相应的设计规范；两者又有各自所适用的领域。 所幸，要使我们的设计方案同时满足这两类设备的规范，并非一件难事，只是有些地方需要注意。比如，触屏设备无法反映CSS定义的hover行为及相应的样 式，因为它没有鼠标指针的概 念，手指点击就是click行为。所以不要让任何功能依赖于对hover状态的触发。

有兴趣的话，可以读读这篇”Designing for Touchscreen“， 这里提到的很多建议即有利于改进针对触屏设备的设计方式，同时也不会削弱传统键鼠设备上的用户体验。比如，放在页面右侧的导航列表可以对触屏设备的用户更 加友好。因为多数人习惯用右手点击操作，而左手负责握住设备；这样，放在右侧的导航列表即方便右手的点击，又可以避免被握着设备的左手不小心触碰到。而这 一点与键鼠设备用户的习惯有效不矛盾。

结论

这篇文章真是又臭又长，终于快完了。我们确实进入了web开发的新时代，随着科技进步我们还会继续优化我们的体验。今天我们设计的网站应该能够适应未来和现在，了解响应式web设计不需要太多的学习，他绝对比为每款设备提供设计方便的多。

响应式web设计并不是较好的，这只是个单纯的概念，它可以有效的提高用户体验但是却不能有效解决。我们要面对不断出现的新设备出现，找出一个更好的解决方案，不断的改善用户体验。

响应式web设计可以提供一个比较满意的效果，他给广泛的应用设备提供了一个自定义的解决方案，无论是一个老式旧笔记本还是较先进的设备都能够获得比较好的体验，这才是作为网页设计师较想看到的，设计师眼中只有用户，用户感觉好自己就高兴，自己苦点累点又算什么呢？

以上内容由虎网科技（西安网站设计,西安网站制作）为您提供，更多精彩内容：https://www.huwz.com/

关注“虎网科技”微信公众号，快速获取互联网较新资讯

企业怎样依靠网站建设带来效益从而赚钱

    随着市场经济的不断发展，越来越多的企业为了赢得更高的经济效益，开始关注市场动态，不断完善自己的销售策略。近年来，网络事业的发展赢得的成绩也是举世瞩目的，企业在关注销售策略的时，也开始瞄准了网站这个大平台，纷纷将销售和网站相结合，开展了一系列的互联网市场调研，建立了很多完备的互联网营销策略。有很多企业都选择了网站建设，那么企业怎样依靠网站建设带来效益从而赚钱呢？ 企业怎样依靠网站建设带来效益从而赚钱...

       宝安东兴快捷电路板和虎网科技签订做网站项目 东兴快捷是经深圳市宝安区工商局审核的有资质公司，统一社会信用代码：91440300MA5DD5C84K。东兴快捷选用虎网站经济型入门级网站案例，其功能比较简单的程序，广告单图(无动漫)，页面较简单，适合小微企业产品展示型网站。东兴快捷位于深圳市宝安区松岗街道燕川北部工业园B栋。 　　东兴快捷是一家专业从事高密度多层印制板、高阶特种板生产厂家。产品广泛应用于安防、通迅、工业控制、电源、数码、航空航天...

       如何增加企业网站信用度 有些人或许并不很懂，觉得网站信任度其实就是用户对网站的认可度，其实说实话，这种认识并不全面，在互联网中，信用度通常包含两个方面：1）浏览者对于站点的信任程度，2）搜索引擎对于网站的信任值。由此可见，想要增加企业网站的信任度就需要从这两个方面入手，一个是网站自身建设，另一个就是做好网站的引流工作。那么，具体怎么做呐？ 一、网站制作要大气 网站整体布局对于网站的美感有着直接的影响，若一个企业网站...

       企业在网站制作前需要提供哪些资料? 目前，我们接到很多客户的电话咨询，还是有部分客户在咨询中不明白制作一个网站需要提供什么资料，在此大致列了一个提纲，供制作客户参照。 　　1、【网站名称】，就是您先给您的网站起个名字，例如:如果是企业网站，就用自己企业的名称，如果是行业或者是内容网站，就是，信息网;在线等。 　　2、【企业简介】，这个可以是企业介绍，也可以是网站介绍，这个如果有的话，就顺手给我们，如果没有，可以以后自己添加。 　　3...

       新网站在谷歌没有关键词排名原因是什么 谷歌优化新站有这样一种情况，大家都知道谷歌收录是最快的了，新站只要提交，谷歌当天或隔天就能收录，而且收录量也可以，及收录首页，也收录内页，这样的速度别的搜索引擎是无法比拟的。 　　新站提交上去以后，谷歌很快收录，一般谷歌会给其一个比较好的排名，一般在第二页或第三页，一般不会第一页，除非没有竞争。但是一般时间不长，过一周或半个月当下次谷歌大更新的时间，排名就没有了，这是什么原因呢，今天笔者就主要分析...

       企业网站设计中响应式图片显示内容设计 真正具有响应性的Web设计是完全调整网站以满足访问者的设备。我们需要在响应式布局的页面上传送最佳的、前后联系的图片尺寸。如果是背景图片，我们可以准备多张不同尺寸的图片，然后在各自的媒体查询样式中使用对应的图片背景，再结合min-width、min-height、max-width、max-height等样式属性来限制窗口最小或最大宽度和高度，模拟响应式及流式布局，从而保证图片不失真。 如...