meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no">
方法一： px,vw与rem相结合
设计图 750px, 即 100vw = 750px
1px = 0.1333333vw
1000px = 133.3333vw
1rem = 1个html字体的大小
所以，设计如下样式，然后所有的设计稿像素 / 1000再加 rem即可
html{
/* 网页中字体大小最小是12px(0除外)
如果我们设置了一个小于12px的字体，则字体自动设置为12px
- 100vw : 一个视口的宽度(即name="viewport" content="width=device-width))
- 1vw : 1%个视口的宽度
100vw = 750px(设计图)
0.1333333vw = 1px
133.33333 = 1000px
*/
font-size: 133.33333vw;
}
*{
margin:0; padding:0;
}
.box1{
/* -- 1 rem = 1 html字体的大小
-- 1 rem = 1000px(设计图)
按照 750px的设计图，所有的像素 除以 1000加上rem即可
比如： 100px; 写成 0.1rem
*/
width: 0.1rem;
/* 宽 100 px */
height:0.05rem;
/* 高 50px */
background-color: green;
}方法二.
将HTML、body的font-size 设置成100px;
每次只需将 设计稿的宽度调成640 然后 除以 100
@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}方法三： 通过JS实现
1.核心代码
//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);2.使用方法
1）将上面的代码引入到你的页面<script>标签里面；
2）根据设计稿调整后面的参数
3）使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。
