前言：H5自适应+vue 或 uni-app可以实现大部分前端（包括 pc浏览器 手机浏览器 安卓app 苹果app 微信小程序等）需要的样式，如果移动端需要性能等方面优化，就直接用安卓原生和苹果原生就好了，写一点简单的样式慢慢来，前端是入门易，复杂页面也挺难的。
H5自适应入门：/AaronBear/p/5670886.html
代码如下，理解横排的 3个模块 变2+1，再由2+1变1+1+1的过程
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1" /><title>css3-media-queries-demo</title><style>body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {padding: 0;margin: 0;}.content{zoom:1;}.content:after{content: ".";display: block;height: 0;clear: both;visibility: hidden; }.leftBox, .rightBox{float: left;width: 20%;height: 500px;margin: 5px;background: #ffccf7;display: inline;-webkit-transition: width 1s ease;-moz-transition: width 1s ease;-o-transition: width 1s ease;-ms-transition: width 2s ease;transition: width 1s ease;}.middleBox{float: left;width: 50%;height: 800px;margin: 5px;background: #b1fffc;display: inline;-webkit-transition: width 1s ease;-moz-transition: width 1s ease;-o-transition: width 1s ease;-ms-transition: width 1s ease;transition: width 1s ease;}.rightBox{background: #fffab1;}@media only screen and (min-width: 1024px){.content{width: 1000px;margin: auto}}@media only screen and (min-width: 400px) and (max-width: 1024px){.rightBox{width: 0;}.leftBox{ width: 30%}.middleBox{ width: 65%}}@media only screen and (max-width: 400px){.leftBox, .rightBox, .middleBox{ width: 98%;height: 200px;}}</style></head><body><div class="content"><div class="leftBox"></div><div class="middleBox"></div><div class="rightBox"></div></div></body></html>
![[转载]利用@media screen实现网页布局的自适应 @media screen and](https://1500zi.500zi.com/uploadfile/img/14/758/16d4cc7ba55b929135b03aea27d63b9d.jpg)
