怎么建设响应式页面布局呢？需要注意什么？
发布时间：2024-12-24 点击：24
响应式页面相信大家都不陌生了，在当今的互联网世界几乎随处可见。今天跟大家分享一下响应式页面布局的原理和基础知识，希望大家对响应式页面有个较为全面的把握。
网站制作3-2020.11.02.jpg/>
原理
随着显示终端设备的多样化，出现了各种尺寸的屏幕。而传统的网页主要针对桌面电脑而设计和制作的，电脑显示器屏幕虽然也有多个规格，但相对固定，页面内容区的版块宽度一般也设置为980px。而移动互联网的发展，各种屏幕的手机、pad等出现后，情况变得复杂，但是毕竟移动是趋势，为了给移动端查看网页更好的体验，必须做适合于移动端设备的页面。
那么怎么建设响应式页面布局呢？
一个方法是为不同的设备专门制作对应的网站：当用户访问的时候，还是访问pc的域名，然后识别用户的设备，跳转到对应的专门移动端页面，这也就是很多网站m.域名的由来。另一个方法是，和pc同样的页面，当用户访问的时候，不根据用户的设备类型，而是根据用户的设备的屏幕大小，然后对页面应用与pc端不同的样式，使这个页面在这个设备上看起来像是为移动端专门做的页面，这就是现在流行的响应式页面设计——responsive design。
两种方法的优劣显而易见。第一种方法开发、运营、推广各种成本几乎就double了，但可以提供更为专业的移动端体验，所以说，除非这个网站盈利够大，要求很高，而且主要是有钱，可以这么干。第二种方法就是两个字——省事，就是编写一个页面，适应所有设备。
下面开始介绍这种省事又酷炫的方法。
基础
meta标签设置视口（viewport）
首先说说viewport，也就是移动开发中经常提及的viewport，当然移动设备的viewport还涉及到物理像素和逻辑像素的问题，在此不做更深的讨论。总之，这个viewport是指网页浏览器（不管是pc还是移动端）中呈现网页的区域，站在用户的角度来说，就是用户能看到的地方。正常来说，这个视口的宽度和设备宽度（屏幕宽度）是一样的，但也有例外，比如当你缩放拖拽浏览器的时候，视口也会随之变化（这也是个检查页面是响应式效果的小窍门）。
视口的宽度获取是响应式设计的基础，响应式页面的响应也就是响应视口宽度的变化。那该如何准确获取视口宽度呢？
两种思路。
一种是用js获取并且修改css。但这种方法除了有js无法使用的风险，更主要的是结果并不是我们想要的。通过document.documentelement.clientwidth获得的设备宽度是厂家设置的宽度（也就是竖屏时候的宽度），也就是当横屏的时候，js获取的还是原来的宽度，这就是实际情况不符了。
另外一种方式是通过设置html meta标签来约束视口，其实是控制浏览器如何来渲染网页。代码为：
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
其中“width=device-width”设置视口为设备宽度，“initial-scale=1.0”设置初始化的视口大小是1.0倍
“maximum-scale=1.0”规定允许放大的大倍数是1倍，“user-scalable=no ”不允许缩放视口，这样保证了与设备显示宽度一致。
css媒体查询（media query）
css媒体查询是响应式页面的核心所在，主要功能是对不同的宽度做出不同的css动作（响应），并将这种动作告知浏览器。媒体查询的语法是@media 和 and操作符，分别查询设备类型和设备属性。比如
@media screen and (min-width:900px){
body{background-color:blue}
}
意思是对所有的屏幕，当宽度大于等于（最小宽度）为900px的时候，应有此样式。比如设备宽度为980px的时候，body的背景颜色设置为蓝色。
同样，可以用and连接多个条件，做地更细化。
@media screen and (min-width:600px) and (max-width:900px){
p{ color:red}
}
意思是对所有的屏幕，当宽度大于在600和900像素之间（包含），将p标签内容的颜色设置为红色。
需要注意的是，ie一些低版本的浏览器如ie6、7、8是不支持媒体查询的，尽管已经很古老，但还是要避免，所以需要先写一个基础的css，一些特殊的需要变化的css代码则可以在媒体查询里。
创建
有了以上的基础，我们结合流式布局和栅栏布局概念，就可以自己开着手开发响应式页面，当然也可以利用其它现有的工具来提高开发速度。
目前主流前端ui框架都是响应式的，比如bootstrap、jquery ui、dojo等。下面以bootstrap为例，师范如何快速创建一个响应式页面。
先到bootstrap官网下载响应的文件，或者你可以用线上的，不过还是建议下载到本地。
注意可以把css和js文件路劲换成本地路径（相对路径），其中bootstrap.min.css和bootstrap.min.js是bootstrap的核心文件，而bootstrap.min.js是依赖于jq的，所以，jq必须在bootstrap.min.js之前加载。这样，你就结合bootstrap的栅格系统和各种组件搭建自己的响应式页面了，另外，如果你觉得bootstrap的样式不好看，你可以借助媒体查询，在bootstrap.min.js之后引入自己的自定义css覆盖默认的样式。
写网页内容需求留意些什么？
3分钟告诉你什么是渐进式Web应用程序！
互联网络推广能帮公司提升品牌形象吗?
在上海开发APP除了看价格还要注意什么
2014热门网站设计趋势
沉寂多年，无服务器爆发，其硬核是什么？
网游服务器租用需要注意哪些?
APP定制开发报价贵在哪里？
网站制作3-2020.11.02.jpg/>
原理
随着显示终端设备的多样化，出现了各种尺寸的屏幕。而传统的网页主要针对桌面电脑而设计和制作的，电脑显示器屏幕虽然也有多个规格，但相对固定，页面内容区的版块宽度一般也设置为980px。而移动互联网的发展，各种屏幕的手机、pad等出现后，情况变得复杂，但是毕竟移动是趋势，为了给移动端查看网页更好的体验，必须做适合于移动端设备的页面。
那么怎么建设响应式页面布局呢？
一个方法是为不同的设备专门制作对应的网站：当用户访问的时候，还是访问pc的域名，然后识别用户的设备，跳转到对应的专门移动端页面，这也就是很多网站m.域名的由来。另一个方法是，和pc同样的页面，当用户访问的时候，不根据用户的设备类型，而是根据用户的设备的屏幕大小，然后对页面应用与pc端不同的样式，使这个页面在这个设备上看起来像是为移动端专门做的页面，这就是现在流行的响应式页面设计——responsive design。
两种方法的优劣显而易见。第一种方法开发、运营、推广各种成本几乎就double了，但可以提供更为专业的移动端体验，所以说，除非这个网站盈利够大，要求很高，而且主要是有钱，可以这么干。第二种方法就是两个字——省事，就是编写一个页面，适应所有设备。
下面开始介绍这种省事又酷炫的方法。
基础
meta标签设置视口（viewport）
首先说说viewport，也就是移动开发中经常提及的viewport，当然移动设备的viewport还涉及到物理像素和逻辑像素的问题，在此不做更深的讨论。总之，这个viewport是指网页浏览器（不管是pc还是移动端）中呈现网页的区域，站在用户的角度来说，就是用户能看到的地方。正常来说，这个视口的宽度和设备宽度（屏幕宽度）是一样的，但也有例外，比如当你缩放拖拽浏览器的时候，视口也会随之变化（这也是个检查页面是响应式效果的小窍门）。
视口的宽度获取是响应式设计的基础，响应式页面的响应也就是响应视口宽度的变化。那该如何准确获取视口宽度呢？
两种思路。
一种是用js获取并且修改css。但这种方法除了有js无法使用的风险，更主要的是结果并不是我们想要的。通过document.documentelement.clientwidth获得的设备宽度是厂家设置的宽度（也就是竖屏时候的宽度），也就是当横屏的时候，js获取的还是原来的宽度，这就是实际情况不符了。
另外一种方式是通过设置html meta标签来约束视口，其实是控制浏览器如何来渲染网页。代码为：
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
其中“width=device-width”设置视口为设备宽度，“initial-scale=1.0”设置初始化的视口大小是1.0倍
“maximum-scale=1.0”规定允许放大的大倍数是1倍，“user-scalable=no ”不允许缩放视口，这样保证了与设备显示宽度一致。
css媒体查询（media query）
css媒体查询是响应式页面的核心所在，主要功能是对不同的宽度做出不同的css动作（响应），并将这种动作告知浏览器。媒体查询的语法是@media 和 and操作符，分别查询设备类型和设备属性。比如
@media screen and (min-width:900px){
body{background-color:blue}
}
意思是对所有的屏幕，当宽度大于等于（最小宽度）为900px的时候，应有此样式。比如设备宽度为980px的时候，body的背景颜色设置为蓝色。
同样，可以用and连接多个条件，做地更细化。
@media screen and (min-width:600px) and (max-width:900px){
p{ color:red}
}
意思是对所有的屏幕，当宽度大于在600和900像素之间（包含），将p标签内容的颜色设置为红色。
需要注意的是，ie一些低版本的浏览器如ie6、7、8是不支持媒体查询的，尽管已经很古老，但还是要避免，所以需要先写一个基础的css，一些特殊的需要变化的css代码则可以在媒体查询里。
创建
有了以上的基础，我们结合流式布局和栅栏布局概念，就可以自己开着手开发响应式页面，当然也可以利用其它现有的工具来提高开发速度。
目前主流前端ui框架都是响应式的，比如bootstrap、jquery ui、dojo等。下面以bootstrap为例，师范如何快速创建一个响应式页面。
先到bootstrap官网下载响应的文件，或者你可以用线上的，不过还是建议下载到本地。
注意可以把css和js文件路劲换成本地路径（相对路径），其中bootstrap.min.css和bootstrap.min.js是bootstrap的核心文件，而bootstrap.min.js是依赖于jq的，所以，jq必须在bootstrap.min.js之前加载。这样，你就结合bootstrap的栅格系统和各种组件搭建自己的响应式页面了，另外，如果你觉得bootstrap的样式不好看，你可以借助媒体查询，在bootstrap.min.js之后引入自己的自定义css覆盖默认的样式。
写网页内容需求留意些什么？
3分钟告诉你什么是渐进式Web应用程序！
互联网络推广能帮公司提升品牌形象吗?
在上海开发APP除了看价格还要注意什么
2014热门网站设计趋势
沉寂多年，无服务器爆发，其硬核是什么？
网游服务器租用需要注意哪些?
APP定制开发报价贵在哪里？
下一篇：挑选北京网站建设商需要注意的内容