在智能手机、平板电脑等移动设备普及之前，我们看到的网站几乎都是固定宽度的，其目标是让所有用户都拥有一样的浏览体验。但随着移动设备用户数的高速增长，上网设备屏幕尺寸之间的差异越来越大，采用固定宽度布局的网站已经满足不了人们的上网需求。面对不断扩展的移动设备和浏览器，响应式网站设计可以让一个网站同时适配多种设备和多种不同分辨率的屏幕，可以让网站的布局和功能随着用户屏幕大小、设备能力的不同而变化。
1 媒体查询
媒体查询包含媒体类型和零个或多个检测媒体特性的表达式，width、height和color等特性都可以用于媒体查询，使用媒体查询，可以不用修改网页内容本身，就可以让同一个页面适配不同的设备。css3规范包含很多模块，媒体查询只是其中一个模块。利用媒体查询，网站开发人员可以根据显示设备的不同特性和能力来确定要应用的样式表。比如，可以根据viewport的宽度、屏幕的宽高比和朝向(水平或垂直)，只用简单的css代码就可以达到改变网页内容的显示方式。
1.1 媒体查询的设计方式
从原理上讲，位于样式表下方的css会覆盖上方的目标相同的css，除非上方的选择器优先级更高或者更具体。因此，在设计页面时，我们可以在一开始设置一套基准样式，将其应用于不同版本的设计方案，这套样式表确保所有用户的基准浏览体验，然后再通过媒体查询覆盖原样式表中的相关部分。例如，如果是在一个很小的viewport中，可以只显示文本导航或用较小的字体，而对于拥有较大空间的viewport，则可以通过媒体查询为文本导航加上icon图标。下面是一个简单的示例，首先是基准样式：
.cardlink{display:block;color:#666;text-shadow:0 2px 0 #efefef;height:2em;
position:relative;border-bottom:1px solid #bbb;line-height:2.75rem;}
接下来是针对屏幕宽度超过300像素的设备指定特殊的样式：
@media(min-width:300px){padding-left:1.8rem;font-size:16px;}
1.2 关于视口的meta标签
为了利用媒体查询，网站应该让小尺寸的屏幕以其原生的大小来显示页面，而不是先在某个像素宽的窗口中渲染好，然后再让用户去放大或缩小。2007年，苹果公司在发布iphone的时候，引入了一个针对视口的meta标签，目前安卓系统和其他主流的手机操作系统都支持包含视口的meta标签，该标签是网页与移动浏览器的接口，网页通过这个标签告诉移动浏览器，它希望移动浏览器如何渲染当前页面。
在可以预见的未来，任何响应式网站的页面，如果想要在小尺寸的屏幕上得到良好的显示效果，都必须添加这个meta标签。这个视口meta标签应该放在html中的head标签下，可以在其中设置具体的宽度或设置一个比例。例如：>meta name=”viewport”content=”width=device-weidth，initial-scale=1.0”/p class=”wrapmiddle”/pp class=”left”/pp class=”middle”/pp class=”right”/p/pp class=”menuwrap” a href= / a a href=”#”class=”listitem”/ a a href=”#”class=”lastitem”/ a/p img src=”sky_small.jpg”srcset=”sky_medium.jpg 1.5x，sky_large.jpg 2x”alt=”sky in the summer”/<
其中src属性除了指定图片的原始大小外，还有一个作用是：当浏览器不支持srcset属性时可以当作备用图片。对于支持srcset属性的浏览器，通过不同的分辨率，浏览器可以自己决定选择哪一张图片。
随着智能手机等移动设备的普及，用户越来越频繁地使用移动设备来浏览网站，因此如果开发人员设计出来的网站只能够在pc显示器中正确显示，而在移动设备中的浏览体验并不友好，那么将在很大程度上流失用户对该网站的关注量。响应式或移动优先的设计理念，在设计网站时已经考虑多种屏幕的尺寸以及对应的用户体验，是目前以及未来多年内网站开发技术发展的一个趋势
深圳市新万网络h5响应式（saas版）全屏自适应设计，高颜值品牌制作；兼容所有上网设备，统一管理，开发成本低，简单管理，一次更新数据，各终端同步；更有响应式建站定制款，一对一设计的企业建站，h5多样式官网，可提供源代码的网站建设，“真正”的响应式建站。
文章来源：