如今浏览网页的用户有手机，平板电脑，手提电脑，台式电脑，分辨率都各不相同，如果使用固定的宽度，不同的设备浏览网页将会出现混乱或不协调的情况，手机浏览器会根据设定调整自己的网页可视区域，通常为980px（根据设备设置而定）。并且，在移动设备上px可能与电脑上的度量不同，这是由于技术的发展，手机的屏幕像素密度越来越高，造成一个像素点可能对应两个物理像素。想要实现响应式网页，需要对整个网页布局进行分析，在此基础上，再考虑以下方法。

   响应式网页（Responsive Web，RW）又称自适应网页，是一种网页设计布局，可以根据访问媒体不同（网页宽高变化）而变化样式，防止网页布局因访问环境而造成布局混乱，影响用户体验。

<meta content="width=device-width, initial-scale=1.0" name="viewport">

这句话可以说写网页必备，首先我们来理解一下这句话的作用。

meta是一个辅助性标签，可以提供网页元信息，方便SEO，对于响应式布局也有帮助。

viewport是设备能够显示网页的那块区域，根据设备的不同，其viewport可能也不相同。viewport有三种，分别是layout、visual和ideal，这三种具体讲解请自行搜索。移动设备默认是layout viewport，但在开发过程中，我们需要ideal viewport。width=device-width正是将宽设置成ideal viewport的状态，initial-scale是设置页面初始缩放值，viewport总共有六个属性：

width：设置viewport宽度

height：设置viewport高度

initial-scale：设置页面初始缩放值

minimum-scale：允许用户最小缩放值

maximum-scale：允许用户最大缩放值

user-scalable：是否允许用户缩放

CSS3推出了许多相对度量单位，相对度量单位是指参考某一元素变化度量，也就是说其并不是一直不变的。

%: 字面意思百分号，根据父元素而变化。如 width：100% 宽度即父元素大小

vw: 视图宽度，根据视图而变化。如width：100vw 宽度即网页视图宽度

vh: 视图高度，根据视图而变化。如height： 100vh 高度即网页视图高度

em: 根据当前对象文本大小而变化（仅用于字体）

rem: 根据根元素文本大小而变化（仅用于字体）

对于一些需要跟随页面变化的元素，应该使用相对度量单位。比如input框

input[type=text] {

width: calc(100% - 50px) // 跟随父元素宽度且少50px

}

    flex布局也是制作响应式网页重要的一环。flex布局可以用来为盒状模型提供最大的灵活性，最大程度上利用网页空间。当网页宽高变化时，flex布局可以将盒子重新排列，实现网页布局整齐。

    对于一些宽高无法固定的盒模型，宽高不能设置成定值(height：100px)， 而应该通过百分比，vh或者其他相对度量值。百分比和vh用的比较多，对于页面的主体的部分通常写：width: 100%

// width和height有很多写法，auto、100%、100vw（width）和100vh（height）等等，每种对应不同情况，比如100vh表明盒子高为一视图页面高

注意：不应该所有盒子都设置对象度量。大盒子设置width：100%时，应该思考其内部小盒子需不需要也设置相对度量，如果都设置成width：100%，那么页面变化时，几个盒子都跟着变化，造成样式混乱。一般应该大盒子设置相对，内部小盒子设置定值，这样当大盒子随着页面变化后，如果宽度不够容下所有小盒子，会将其挤到下一行。

媒体查询

@media是CSS3推出的一个新特性，它能识别各种设备，通常类型值设为screen。通过@media可以定义不同宽高下的样式，比如当页面宽度小于800px之间时主体部分背景色变为红色

@media screen and (max-width: 800px) {

   main {

       background-color: red;

   }

}

替换元素

对于一些无法直接通过改变样式的元素，可进行替换，如导航栏，页面缩小时，导航栏项不可以减少，字体大小改变也会导致无法看清等问题，这些将其替换成icon图标，点击即出现导航栏。

响应式框架

当然，现在前端框架已经发展的十分成熟，非必要不需要从零开始布局。推荐几个响应式前端框架：

Bootstrap

自 Bootstrap 3起，Bootstrap就支持响应式布局，且移动设备优先。bootstrap开源且上手简单，十分推荐

Foundation

Foundation也是相当成熟的前端框架，不仅支持响应式布局，也提供多种web UI组件

Ulkit

Ulkit是一个轻量级、模块化的前端框架，帮助开发出快速、强大的Web接口，它有着全面的HTML、CSS和JS集合，易于使用和扩展。

Groundwork

Base

    黄埔网站建设在制作应对多浏览器的网站制作需求，将优先考虑使用响应式自适应网页来实现客户的需求。