自适应--手机端网页代码

一：必读：响应式和自适应的区别：https://www.cnblogs.com/guozh/p/10163339.html                               二：rem 是如何实现自适应布局的： https://www.cnblogs.com/guozh/p/10163350.html

一：在头部加入代码

1.第一行： 这句话是自动设置缩放，然而，它并不能完全适应所有的手机，并且你在用浏览器手机模式调试的时候可能正常，但是换到真实的手机端其实是不正常的。所以我们还要进行改动。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  <!--(device:设备)、 (initial：最初的)、 (scale:规模)、 (maximum:最大值的)、 (scalable:伸缩) -->

2.第二行代码：

<meta name="format-dection" content="telephone=no"/>  <!--禁止将页面中的一连串数字识别为电话号码、并设置为手机可以拨打的一个连接-->

二：用rem替代px（代码方案一）   给根元素设置字体大小为20px。html,body{font-size:20px}, 要记得本js的1rem=40px哦

<script type="text/javascript">
!function(a){function b(){
　　var b=a.document,c=b.documentElement,d=c.getBoundingClientRect().width;
　　document.documentElement.style.fontSize=20*(d/360)+"px"}window.addEventListener("DOMContentLoaded",function(){b()},!1),window.addEventListener("resize",function(){b()}),b()}(window);
    </script>

后面页面中所有的尺寸按照PSD上面量出来后除以40转换成rem单位的数值，注意是任何尺寸都要需要去除以40，这比第一种设置百分比按照父元素的宽度去计算方便很多。

a、图片需要设置宽和高，PSD量出来后除以40，少一个都不行，只设置一个图片会被拉变形。 b、做手机端页面时，清除margin和padding 用*可能清除不掉，需要加上标签名字去清除。 c、其他的按照正常的去做。

二：用rem替代px（代码方案二）  下面代码中的640指的是手机的屏幕宽度，所以这里用i=640指代屏幕的最大宽度，最小是320px，要记得本js的1rem=100px哦，其实是为了好换算，比如 font_size:14px;我们就可以写成，font_size:0.14rem。

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

三：也可以用Media实现

html { font-size:100px; }
@media(max-width:540px){ html { font-size:84.375px; } } /*Android常用宽度*/
@media(max-width:480px){ html { font-size:75px; } }        /*Android常用宽度*/
@media(max-width:414px){ html { font-size:64.69px; } }  /*i6Plus,i7Plus宽度*/  
@media(max-width:375px){ html { font-size:58.59px; } }    /*i6,i7宽度*/
@media(max-width:360px){ html { font-size:56.25px; } }    /*Android常用宽度*/
@media(max-width:320px){ html { font-size:50px; } }        /*i5宽度*/

拓展---------------------------

<meta http-equiv="Cache-Control" content="no-transform" />   <!--告诉搜索引擎不要把网页转码-->
<meta http-equiv="Cache-Control" content="no-siteapp" />     <!--告诉搜索引擎不要把网页转码-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />     <!--声明网页可以缩小放大-->

转：https://www.cnblogs.com/yewenxiang/p/6087583.html        转：http://www.php.cn/div-tutorial-408053.html