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。