移动端适配与响应式布局的区别
简单适配原理：
px自动转rem的方法：
1、sass less等
2、工程化手段
3、sublime安装插件
下载cssrem插件压缩包 https://github.com/flashlizi/cssrem
sublime-首选项-浏览插件，打开插件目录packages ，把解压后的文件夹放进去
重启sublime，首选项-插件设置-cssrem-settings-user，复制这段话，然后保存
{"px_to_rem": 40, //px转rem的单位比例，默认为40
"max_rem_fraction_length": 6, //px转rem的小数部分的最大长度。默认为6。
"available_file_types": [".css", ".less", ".sass",".html"]
//启用此插件的文件类型。默认为：[".css", ".less", ".sass"]}输入px时会出现下拉提示转rem，按tab键即可自动转换
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"><title>简单适配原理title><style>*{margin:0;padding:0;box-sizing:border-box;}html{font-size:40px;}.header-container{width:100%;/*设计图纸中750(viewWidth)->高度100px
人为规定1rem=viewWidth/18.75=40px（这个值不固定，选择易于转换计算的即可）
750px(viewWidth)->100px高度->2.5rem
375px(viewWidth)->50px高度->2.5rem*/height:2.5rem;background:rgba(222,24,27,0.9);}.main-container{padding:2.5rem 0;background:#eee;}.slider-container{height:9.15rem;background:lightgreen;}.nav-container{height:8.475rem;background:lightblue;}.recommend-container{height:50.0rem;background:pink;}.tabbar-container{height:2.5rem;background:#fff;}html,body{width:100%;height:100%;}.header-container,
.tabbar-container{position: fixed;left:0;width:100%;z-index:1000;}.header-container{top:0;}.tabbar-container{bottom:0;}style><script src="simple.js">script>head><body><header class="header-container">header><div class="main-container"><div class="slider-container">div><nav class="nav-container">nav><div class="recommend-container">div>div><div class="tabbar-container">div>body>html>simple.js
(function(){"use strict";
setRemUnit();
window.onresize=setRemUnit;function setRemUnit(){// 1rem=viewWidth/18.75var ratio=18.75;var docEl=document.documentElement;var viewWidth=docEl.getBoundingClientRect().width || window.innerWidth;
docEl.style.fontSize=viewWidth/ratio+"px";
}
})();
通用适配原理
简单适配原理存在的问题：
如果设置了1px的边框，在dpr=1时，边框为1；dpr=2时，边框为2；dpr=n时，边框为n
（注意，QQ截取看不出，需要使用开发工具的截图capture screenshot，然后在PS里打开查看边框高度）
调试工具里可以添加可视化阴影，点击三个小点点
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>通用适配方案title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/icons.css"><link rel="stylesheet" href="css/index.css"><script src="flexible.js">script>head><body><header class="header-container"><div class="navbar"><div class="navbar-left"><i class="iconfont icon-scan">i>div><div class="navbar-center"><div class="searchBox"><div class="searchBox-prepend"><i class="iconfont icon-search">i>div><input type="text" class="searchBox-input" placeholder="开学季有礼，好货五折起"><div class="searchBox-append"><i class="iconfont icon-close">i>div>div>div><div class="navbar-right"><i class="iconfont icon-msg">i>div>div>header><div class="main-container"><div class="slider-container"><img src="img/slider/1.jpg">div><nav class="nav-container"><ul class="nav"><li class="nav-item"><a href="#" class="nav-link"><img src="img/nav/1.png" class="nav-img"><span class="nav-text">团购span>a>li><li class="nav-item"><a href="#" class="nav-link"><img src="img/nav/2.png" class="nav-img"><span class="nav-text">团购span>a>li><li class="nav-item"><a href="#" class="nav-link"><img src="img/nav/3.png" class="nav-img"><span class="nav-text">团购span>a>li><li class="nav-item"><a href="#" class="nav-link"><img src="img/nav/4.png" class="nav-img"><span class="nav-text">团购span>a>li><li class="nav-item"><a href="#" class="nav-link"><img src="img/nav/5.png" class="nav-img"><span class="nav-text">团购span>a>li><li class="nav-item"><a href="#" class="nav-link"><img src="img/nav/6.png" class="nav-img"><span class="nav-text">团购span>a>li><li class="nav-item"><a href="#" class="nav-link"><img src="img/nav/7.png" class="nav-img"><span class="nav-text">团购span>a>li><li class="nav-item"><a href="#" class="nav-link"><img src="img/nav/8.png" class="nav-img"><span class="nav-text">团购span>a>li><li class="nav-item"><a href="#" class="nav-link"><img src="img/nav/9.png" class="nav-img"><span class="nav-text">团购span>a>li><li class="nav-item"><a href="#" class="nav-link"><img src="img/nav/10.png" class="nav-img"><span class="nav-text">团购span>a>li>ul>nav><div class="recommend-container"><ul class="recommend"><li class="recommend-item"><a href="#" class="recommend-link"><p class="recommend-pic"><img src="img/recommend/1.jpg" class="recommend-img">p><p class="recommend-name">欧派橱柜定制简约现代p><p class="recommend-origPrice">￥2000.00p><p class="recommend-info"><span class="recommend-price">￥398.00span><span class="recommend-count">985件已售span>p>a>li><li class="recommend-item"><a href="#" class="recommend-link"><p class="recommend-pic"><img src="img/recommend/2.jpg" class="recommend-img">p><p class="recommend-name">欧派橱柜定制简约现代p><p class="recommend-origPrice">￥2000.00p><p class="recommend-info"><span class="recommend-price">￥398.00span><span class="recommend-count">985件已售span>p>a>li><li class="recommend-item"><a href="#" class="recommend-link"><p class="recommend-pic"><img src="img/recommend/3.jpg" class="recommend-img">p><p class="recommend-name">欧派橱柜定制简约现代p><p class="recommend-origPrice">￥2000.00p><p class="recommend-info"><span class="recommend-price">￥398.00span><span class="recommend-count">985件已售span>p>a>li><li class="recommend-item"><a href="#" class="recommend-link"><p class="recommend-pic"><img src="img/recommend/4.jpg" class="recommend-img">p><p class="recommend-name">欧派橱柜定制简约现代p><p class="recommend-origPrice">￥2000.00p><p class="recommend-info"><span class="recommend-price">￥398.00span><span class="recommend-count">985件已售span>p>a>li><li class="recommend-item"><a href="#" class="recommend-link"><p class="recommend-pic"><img src="img/recommend/5.jpg" class="recommend-img">p><p class="recommend-name">欧派橱柜定制简约现代p><p class="recommend-origPrice">￥2000.00p><p class="recommend-info"><span class="recommend-price">￥398.00span><span class="recommend-count">985件已售span>p>a>li><li class="recommend-item"><a href="#" class="recommend-link"><p class="recommend-pic"><img src="img/recommend/6.jpg" class="recommend-img">p><p class="recommend-name">欧派橱柜定制简约现代p><p class="recommend-origPrice">￥2000.00p><p class="recommend-info"><span class="recommend-price">￥398.00span><span class="recommend-count">985件已售span>p>a>li><li class="recommend-item"><a href="#" class="recommend-link"><p class="recommend-pic"><img src="img/recommend/7.jpg" class="recommend-img">p><p class="recommend-name">欧派橱柜定制简约现代p><p class="recommend-origPrice">￥2000.00p><p class="recommend-info"><span class="recommend-price">￥398.00span><span class="recommend-count">985件已售span>p>a>li><li class="recommend-item"><a href="#" class="recommend-link"><p class="recommend-pic"><img src="img/recommend/8.jpg" class="recommend-img">p><p class="recommend-name">欧派橱柜定制简约现代p><p class="recommend-origPrice">￥2000.00p><p class="recommend-info"><span class="recommend-price">￥398.00span><span class="recommend-count">985件已售span>p>a>li><li class="recommend-item"><a href="#" class="recommend-link"><p class="recommend-pic"><img src="img/recommend/9.jpg" class="recommend-img">p><p class="recommend-name">欧派橱柜定制简约现代p><p class="recommend-origPrice">￥2000.00p><p class="recommend-info"><span class="recommend-price">￥398.00span><span class="recommend-count">985件已售span>p>a>li><li class="recommend-item"><a href="#" class="recommend-link"><p class="recommend-pic"><img src="img/recommend/10.jpg" class="recommend-img">p><p class="recommend-name">欧派橱柜定制简约现代p><p class="recommend-origPrice">￥2000.00p><p class="recommend-info"><span class="recommend-price">￥398.00span><span class="recommend-count">985件已售span>p>a>li>ul>div>div><div class="tabbar-container"><ul class="tabbar"><li class="tabbar-item tabbar-item-active"><a href="#" class="tabbar-link"><i class="iconfont icon-home">i><span>首页span>a>li><li class="tabbar-item"><a href="#" class="tabbar-link"><i class="iconfont icon-home">i><span>首页span>a>li><li class="tabbar-item"><a href="#" class="tabbar-link"><i class="iconfont icon-home">i><span>首页span>a>li><li class="tabbar-item"><a href="#" class="tabbar-link"><i class="iconfont icon-home">i><span>首页span>a>li>ul>div>body>html>
base.css
* {box-sizing: border-box;padding: 0;margin: 0;
}body {font-size: 12px;color: #5d655b;
}a {font-size: 12px;color: #686868;text-decoration: none;-webkit-tap-highlight-color: transparent;/*取消点击a链接出现高亮色*/}input {font-size: 12px;border: none;background: none;outline: none;
}[data-dpr="2"] body,
[data-dpr="2"] a,
[data-dpr="2"] input {font-size: 24px;
}[data-dpr="3"] body,
[data-dpr="3"] a,
[data-dpr="3"] input {font-size: 36px;
}li {list-style: none;
}img {vertical-align: top;border: none;width: 100%;
}
icons.css
@font-face {font-family: "iconfont";src: url('../fonts/iconfont.eot?t=1522237704791');/* IE9*/src: url('../fonts/iconfont.eot?t=1522237704791#iefix') format('embedded-opentype'),/* IE6-IE8 */url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), url('../fonts/iconfont.ttf?t=1522237704791') format('truetype'),/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('../fonts/iconfont.svg?t=1522237704791#iconfont') format('svg');/* iOS 4.1- */}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-backtop:before {content: "\e689";
}.icon-personal:before {content: "\e610";
}.icon-scan:before {content: "\e609";
}.icon-clear:before {content: "\e622";
}.icon-msg:before {content: "\e7a8";
}.icon-category:before {content: "\e7f9";
}.icon-search:before {content: "\e616";
}.icon-delete:before {content: "\e6ac";
}.icon-service:before {content: "\e643";
}.icon-setting:before {content: "\e64c";
}.icon-back:before {content: "\e60f";
}.icon-shop:before {content: "\e624";
}.icon-close:before {content: "\e60c";
}.icon-more:before {content: "\e85c";
}.icon-home:before {content: "\e699";
}.icon-collect:before {content: "\e78c";
}.icon-cart:before {content: "\e635";
}
index.css
/*布局*/html,body{width:100%;height:100%;
}/*header*/.header-container{top:0;background:rgba(222,24,27,.9);
}.header-container,
.tabbar-container{position: fixed;left:0;width:100%;height:2.5rem;
z-index:1000;
}/*tabbar*/.tabbar-container{background:#fff;bottom:0;box-shadow: 0 0 10px 0 rgba(154,141,141,.6);
}/*main-container*/.main-container{padding:2.5rem 0;background:#eee;
}/*nav-container*/.nav-container{background:#fff;margin-bottom:0.5rem;
}/*组件*//*navbar*/.navbar{display:flex;height:100%;
}.navbar-left,
.navbar-center,
.navbar-right{display: flex;justify-content:center;align-items:center;
}.navbar-left,
.navbar-right{width:2.2rem;
}.navbar-center{flex:1;/*占据所有剩余空间*/}.navbar-left .iconfont,
.navbar-right .iconfont{color:#fff;font-size:1.2rem;
}/*searchBox*/.searchBox{width:100%;display: flex;height:1.6rem;border-radius:0.8rem;/*高度的50%为圆角*/background:#fff;
}.searchBox-prepend,
.searchBox-input,
.searchBox-append{height:100%;
}.searchBox-prepend,
.searchBox-append{display: flex;justify-content: center;align-items: center;width:1.6rem;
}.searchBox-input{flex:1;
}.searchBox .iconfont{font-size:0.9rem;color:#ccc;font-weight:bold;
}/*nav*/.nav{display: flex;flex-wrap:wrap;padding:0.8rem 0 0.4rem;
}.nav-item{width:20%;margin-bottom: 0.4rem;
}.nav-link{display: block;text-align: center;
}.nav-img{width:2.25rem;height:2.25rem;margin-bottom:0.2rem;
}.nav-text{display: block;
}/*tabbar*/.tabbar,
.tabbar-item,
.tabbar-link{height:100%;
}.tabbar{display: flex;
}.tabbar-item{width:25%;
}.tabbar-link{display: flex;flex-direction:column;justify-content: center;align-items: center;
}.tabbar-link .iconfont{font-size:1.2rem;
}.tabbar-item-active .tabbar-link{color:#de181b;
}/*内容*//*recommend*/.recommend{display: flex;flex-wrap:wrap;justify-content: space-between;
}.recommend-item{width:49.3333%;background:#fff;box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
margin-bottom:0.25rem;
}.recommend-link{display: block;width:100%;height:100%;
}.recommend-pic{width:100%;margin-bottom: 0.4rem;
}.recommend-img{width:100%;height:9.25rem;
}.recommend-name,
.recommend-origPrice,
.recommend-info{padding:0 0.25rem;margin-bottom:0.4rem;
}.recommend-name{/*文字溢出隐藏，只对块元素有效，不是块元素需要转成块元素先*/overflow:hidden;white-space: nowrap;/*不换行*/text-overflow: ellipsis;
}.recommend-origPrice{color:#ccc;
}.recommend-info{display: flex;justify-content: space-between;align-items: center;
}.recommend-price{color:#e61414;font-size:20px;
}[data-dpr="2"] .recommend-price{font-size:40px;
}[data-dpr="3"] .recommend-price{font-size:60px;
}.recommend-count{color:#999;
}flexible.js
(function(){"use strict";// 获取到dpr，然后计算缩放比 scale=1/dprvar docEl=document.documentElement,
viewportEl=document.querySelector("meta[name=viewport]"),
dpr=window.devicePixelRatio || 1,
maxWidth=540,
minWidth=320;
dpr=dpr>=3?3:(dpr>=2?2:1);//dpr为1或者2或者3docEl.setAttribute("data-dpr",dpr);
docEl.setAttribute("max-width",maxWidth);
docEl.setAttribute("min-width",minWidth);var scale=1/dpr,
content='width=device-width,initial-scale='+scale+',user-scalable=no,maximum-scale='+scale+',minimum-scale='+scale+'';//替换或插入metaif(viewportEl){
viewportEl.setAttribute("content",content);
}else{
viewportEl=document.createElement("meta");
viewportEl.setAttribute("name","viewport");
viewportEl.setAttribute("content",content);
document.head.appendChild(viewportEl);
}
setRemUnit();
window.onresize=setRemUnit;function setRemUnit(){// 1rem=viewWidth/18.75var ratio=18.75;var viewWidth=docEl.getBoundingClientRect().width || window.innerWidth;if(maxWidth&&(viewWidth/dpr>maxWidth)){
viewWidth=maxWidth*dpr;
}else if(minWidth&&(viewWidth/dpr<minWidth)){
viewWidth=minWidth*dpr;
}
docEl.style.fontSize=viewWidth/ratio+"px";
}
})();效果图
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
