前言
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。
最近写的项目都有考虑响应式，接下来我来分享一下我用过的响应式处理方案，有错请多多指教！
目录
1.媒体查询
概念：为不同尺寸的屏幕设置不同的 CSS 样式
当屏幕符合时，会使用里面的样式，如果外部设置过，则会替换里面相同的样式，不同的样式会继承
@media 常用参数
| 属性名 | 作用 |
|---|---|
| width、height | 浏览器可视宽度、高度 |
| device-width | 设备屏幕的宽度 |
| device-height | 设备屏幕的高度 |
（1）用法一
/* 屏幕小于 300 px */ @media screen and (max-width: 300px) {
div {
background-color:red; } } /* 屏幕大于 300 px */ @media screen and (min-width: 300px) {
div {
background-color:yellow; } } /* 屏幕小于 300px 大于 200px */ @media screen and (min-width: 200px) and (max-width: 300px){
div {
background-color:blue; } } （2）用法二
条件执行内联样式
<style media="(min-device-width:200px) and (max-device-width:300px)"> div {
background-color:blue; }
style> <style media="(min-device-width:300px) and (max-device-width:400px)"> div {
background-color:yellow; }
style> （3）用法三
条件引入外部样式表
<link href="css/test1.css" rel="stylesheet">
link> // 当浏览器宽度大于 200px 时引入 test2.css <link href="css/test2.css" rel="stylesheet" media="(min-width:200px)">
link> 2.flex 弹性布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
注意：Webkit内核的浏览器，必须加上-webkit前缀。（Chrome、Safari、etc）
（1）交叉轴与主轴
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
根据项目排列方式判定主轴与交叉轴，例如项目水平排列，则x轴为主轴，y轴为交叉轴。
单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
（2）容器属性
详细讲解可以看这里：菜鸟教程Flex
| 属性名 | 作用 | 可选值 |
|---|---|---|
| flex-direction | 决定主轴的方向（即项目的排列方向） | row / row-reverse / column / column-reverse |
| flex-wrap | 决定是否开启换行，如何换行 | nowrap / wrap / wrap-reverse |
| flex-flow | flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap | |
| justify-content | 定义了项目在主轴上的对齐方式 | flex-start / flex-end / center / space-between / space-around |
| align-items | 定义项目在交叉轴上如何对齐 | flex-start / flex-end / center / baseline / stretch |
| align-content | 定义多根轴线的对齐方式（相对于把整个容器看成整体）。只有一根轴线时，不起作用 | flex-start / flex-end / center / space-between / space-around / stretch |
（3）项目属性
| 属性名 | 作用 | 可选值 |
|---|---|---|
| order | 定义项目的排列顺序。数值越小，排列越靠前，默认为0 | |
| flex-grow | 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 | |
| flex-shrink | 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 | |
| flex-basis | 定义了在分配多余空间之前，项目占据的主轴空间 ，默认值为auto | / auto |
| flex | flex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto ， 后两个属性可选。 | none / [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] |
| align-self | 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 | auto / flex-start / flex-end / center / baseline / stretch |
flex的特殊写法
| 属性 | 展开 | 作用 |
|---|---|---|
| flex:auto; | flex:1 1 auto | 有剩余空间自动放大，不够空间则自动缩小，相对于自适应大小 |
| flex:none; | flex:0 0 auto | 不放大不缩小，按width展示项目宽度 |
| flex:0%; | flex:1 1 0% | 自适应大小 |
| flex:100px; | flex:1 1 100px | 自适应大小 |
| flex:1; | flex:1 1 0% | 自适应大小 |
3.rem布局
概念：指相对于根元素的字体大小的单位
区别：em（指相对于父级的字体大小的单位）
（1）用法
html{
font-size:10px; } div {
font-size:1rem; } (2) 动态适配
可以加监听动态修改
// 其实就是根据设备宽度修改根元素 font-size 大小 // 假设设计稿是iphone6 16px let baseDevice = 375 // iphone6 设备宽度 let baseFontSize = 16 // 设计稿 16px let htmlWidth=document.documentElement.clientWidth || document.body.clientWidth; let htmlDom=document.documentElement
htmlDom.style.fontSize=(htmlWidth/baseDevice)*16+'px'; 4.自适应布局
（1）不同的设备使用不同的页面
(function(){
if(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
console.log('移动端')
window.location.href = "phone.html"
}else{
console.log('PC端')
window.location.href = "pc.html"
}
})()
（2）局部伸缩
例子：两端宽度不变，中间宽度随浏览器宽度改变
<style> #father{
display: flex; text-align: center; } #father div:nth-child(1){
flex: 0 0 20px; background-color: yellow; } #father div:nth-child(2){
flex: 1 1 auto; background-color: blue; } #father div:nth-child(3){
flex: 0 0 20px; background-color: red; }
style> <body> <div id="father"> <div>1
div> <div>2
div> <div>3
div>
div>
body> 5.百分比布局
使用百分比作为单位进行布局，可以很好的自适应全部设备，百分比参考的是父级元素的宽度，无父元素则相对于浏览器窗口的宽度。（缺点是计算困难）
| 子元素 | 父元素 |
|---|---|
| width | 基于父级的width |
| height | 基于父级的height |
| margin（top,right,bottom,left） | 基于父级的width |
| padding（top,right,bottom,left） | 基于父级的width |
| left,top,right,bottom | 基于父元素的width，height，width，height |
| font-size | 基于继承得到的font-size |
| line-height | 基于当前字体的font-size |
| transform(left, top) | 基于自身的left， top |
6.grid布局
与flex类似，但是功能更强大，暂无实例，可以取康康好的文章
阮一锋的grid讲解
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218971.html原文链接：https://javaforall.net
