1.概念响应式网站设计是一种网络页面设计布局页面的设计与开发应当根据用户行为以及设备环境系统平台、屏幕尺寸、屏幕方向等进行相应的响应和调整。响应式网站常见特点同时适配PC平板手机等标签导航在接近手持终端设备时改变为经典的抽屉式导航网站的布局会根据视口来调整模块的大小和位置2.实现方式响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理为了处理移动端页面头部必须有meta声明viewportmeta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalableno”属性对应如下width device-width: 是自适应手机屏幕的尺寸宽度maximum-scale: 是缩放比例的最大值inital-scale: 是缩放的初始化user-scalable: 是用户的可以缩放的操作实现响应式布局的方式有如下媒体查询百分比vw/vhrem1.媒体查询CSS3中增加了更多的媒体查询就像if条件表达式一样我们可以设置不同类型的媒体条件并根据对应的条件给相应符合条件的媒体调用相对应的样式表使用Media查询可以针对不同的媒体类型定义不同的样式如media screen and (max-width:1920px) { ... }当视口在375px-600px之间设置特定字体大小18pxmedia 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如果设置成百分比不论是垂直方向还是水平方向都相对于直接父元素的widthborder-radius不一样如果设置border-radius为百分比则是相对于自身的宽度可以看到每个属性都使用百分比会造成布局的复杂度所以不建议使用百分比来实现响应式3.vw/vhvw表示相对于视口窗口的宽度vh表示相对于视口窗口高度。任意层级元素在使用vw单位的情况下1vw都等于视图宽度的百分之一4.remrem是相对于根元素的html的font-size属性默认情况下浏览器字体大小为16px此时1rem 16px可以利用前面提到的媒体查询针对不同设备的分辨率改变font-size的值如下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 docunment.documentElement.clientWidth // 设置根元素字体大小。此时为宽的10等分 document.documentElement.style.fontSize width / 10 px } // 首次加载应用设置一次 init() // 监听手机旋转的事件的时机chongxinshezhi window.addEventListener(orientationchange,init) // 监听手机窗口变化重新设置 window.addEventListener(resize,init)无论设备可视化创窗口如何变化始终设置rem为width的1/10实现了百分比布局除此之外我们还可以利用主流UI框架如element uiantd提供的栅格布局实现响应式
