手机自适应的单位rem，与自适应网页的区别

一个网站有的会分为pc站和移动站，有的网站只有pc站，而现在更多的是自适应的站点。
现在针对自适应的网页设计有很多模板，如bootstrap，它会让你轻松定制一个只适应网站，而现在大多数的网站并不是靠程序员凭空开发的前端与后端，都会运用已经成熟的框架创建自己的网站，如一些集成很好的wordpress框架，和织梦dede等。
自适应的页面，只需要监测不同的屏幕尺寸，使用@media（），写出不同尺寸下的不同尺寸即可.

而现在更多的人使用手机，这就使网页的用户体验度更好，很多大公司都会采用pc站和移动站分开设计。
前端开发者会使用PX，em，rem等单位在设计网页中体现
在最开始的时候我会使用px，这样可以把UI设计稿一个px不差的，完美的设计出来，会使用@media做自适应调整，一个自适应的网站就设计好了。
REM单位：我想说REM单位更适应于制作移动端的网页
网上有很多版本的手机自适应布局的版本介绍

1.使用@media()做自适应

html{
    font-size:1em;
}
@media only screen and (min-width: 371px){
    html {font-size:66%;}
  }
  @media only screen and (min-width: 401px){
      html {font-size: 80%;}
  }
  @media only screen and (min-width: 428px){
      html {font-size: 50%;}
  }

2.使用js控制元素font-szie的大小

<script type="text/javascript">
	(function(e,t){var i=document,n=window;var l=i.documentElement;var r,a;var d,o=document.createElement("style");var s;function m(){var i=l.getBoundingClientRect().width;if(!t){t=540}if(i>t){i=t}var n=i*100/e;o.innerHTML="html{font-size:"+n+"px;}"}r=i.querySelector('meta[name="viewport"]');a="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover";if(r){r.setAttribute("content",a)}else{r=i.createElement("meta");r.setAttribute("name","viewport");r.setAttribute("content",a);if(l.firstElementChild){l.firstElementChild.appendChild(r)}else{var c=i.createElement("div");c.appendChild(r);i.write(c.innerHTML);c=null}}m();if(l.firstElementChild){l.firstElementChild.appendChild(o)}else{var c=i.createElement("div");c.appendChild(o);i.write(c.innerHTML);c=null}n.addEventListener("resize",function(){clearTimeout(s);s=setTimeout(m,300)},false);n.addEventListener("pageshow",function(e){if(e.persisted){clearTimeout(s);s=setTimeout(m,300)}},false);if(i.readyState==="complete"){i.body.style.fontSize="16px"}else{i.addEventListener("DOMContentLoaded",function(e){i.body.style.fontSize="16px"},false)}})(750,750);
</script>

本段js代码适合设计稿宽度为750px，定义body的字体样式为body{font-size: 0.32rem;}，以后写每个div的宽度，每个元素的字体大小，只用（它实际的像素除以100）rem，即可。
本人亲测可以使用.PS:这段js代码会检测你的屏幕尺寸大小，计算相应的根字体大小，达到很好的视觉体验。---间距合适，字体大小合适

手机自适应的单位rem，与自适应网页的区别

猜你喜欢