移动端使用rem+媒体查询使用,解决不同的设备样式

例子:
在这里插入图片描述

总结:单独对一些样式做出改变时，可以用媒体查询通过控制视口的宽度来设置不同的样式，
例子:font-size、color、width、height、padding、margin、position

代码:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 变量声明 */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

.container {
  --fontsize: 25px;
}

/* 样式 */ 
body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}

@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
}
</style>
</head>
<body>

<h1>在媒体查询中使用变量</h1>

<div class="container">
  <h2>Welcome to Shanghai!</h2>
  <p>当浏览器的宽度小于 450px 时，此 div 的字体大小为 25px。当其为 450px 或更宽时，请将 --fontsize 变量值设置为 50px。请调整浏览器窗口的大小来查看效果。</p>
</div>

</body>
</html>

设置最大~最小的视口，还有样式的改变
代码:(举例)
移动端最好用rem来控制。

@media screen and (max-width: 750px) and (min-width: 350px) {
  .container {
    --fontsize: 100px;
    --color:#000000;
    padding:10px 0;
    width:200px;
    height:-2px;
    position: absolute;
    top:-2px;
    ...
  }
}

rem的引入文件:
代码:

代码一：

window.onload = function(){
    /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
    getRem(720,100)
};
window.onresize = function(){
    getRem(720,100)
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}

小米网移动端h5页面自适应代码:

代码二： 小米官网的写法

!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=720,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>720&&(n=720);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

代码三:
(function(doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth;
      if(!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };
  if(!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

看这两个函数，把这些代码放到js里面，规则就是，调用函数，放两个参数，第一个参数，是设计稿的宽度，第二个参数是px与rem的转换比例，通常会写100（因为好算）；当然了，要把这段js代码最好封装在一个单独的js文件里，并且放在所有的css文件引入之前加载。
实际应用起来就是，#box1{ height:100px;}而调用了rem就是#box1{ height:1rem;}以此类推。 100px = 1rem . 1px = 0.01rem。在页面中，凡是跟尺寸有关的padding、margin、width、height等等，都可以用rem来写单位，这样当不同分辨率的手机在看同一个页面时，效果几乎是一样的。

总结:rem的js代码封装，以上有三种方式，可以任意选择适合的一种

移动端使用rem+媒体查询使用,解决不同的设备样式

猜你喜欢