响应式布局

响应式网站设计(Responsive Web design)是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

响应式设计的基本原理

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有 meta 声明 viewport

html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum
-scale=1, user-scalable=no”>

属性：

width=device-width:是自适应手机屏幕的尺寸宽度
maximum-scale:是缩放比例的最大值
inital-scale:是缩放的初始化
user-scalable:是用户的可以缩放的操作

实现方式

1、媒体查询

CSS3 中的增加了更多的媒体查询，就像 if 条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表

使用@Media 查询，可以针对不同的媒体类型定义不同的样式，如:

css

@media screen and (max-width: 1920px) { ... }

当视口在375px-600px之间，设置特定字体大小18px

css

@media screen (min-width: 375px) and (max-width: 600px) {
 body {
  font-size: 18px;
 }
}

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片,比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现

2、百分比

通过百分比单位"%"来实现响应式的效果比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果

height 、 width 属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素:

子元素的top/left和bottom/right如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度/宽度
子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关
子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width
border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度

注意： 每个属性都使用百分比，会造成布局复杂度

3、vw/vh

vw 表示相对于视图窗口的宽度， vh 表示相对于视图窗口高度。任意层级元素、在使用 vw 单位的情况下， 1vw 都等于视图宽度的百分之一, 与百分比布局很相似

4、rem

rem 是相对于根元素 html 的 font-size 属性，默认情况下浏览器字体大小为 16px，此时 1rem = 16px 可以利用前面提到的媒体查询，针对不同设备分辨率改变 font-size 的值，如下:

css

@media screen and (max-width: 414px) {
 html {
 font-size: 18px
 }
}
@media screen and (max-width: 375px) {
 html {
 font-size: 16px
 }
}
@media screen and (max-width: 320px) {
 html {
 font-size: 12px
 }
}

为了更准确监听设备可视窗口变化，我们可以在 css 之前插入 script 标签，内容如下:

// 动态为根元素设置字体大小
function init () {
 // 获取屏幕宽度
 var width = document.documentElement.clientWidth
 // 设置根元素字体大小，为宽的1/10
 document.documentElement.style.fontSize = width / 10 + 'px'
}
// 初始化
init()
// 监听手机旋转事件
window.addEventListener('orientationchange', init)
// 监听窗口变化
window.addEventListener('resize', init)

响应式布局 ​

响应式设计的基本原理 ​

实现方式 ​

1、媒体查询 ​

2、百分比 ​

3、vw/vh ​

4、rem ​