自动适应屏幕宽度_自适应屏幕宽度设置-CSDN博客

本文链接：https://blog.csdn.net/a815673899/article/details/46643691

第一步设置 html 的ID，我这里设置为html，js时候要用到

<html xmlns="http://www.w3.org/1999/xhtml" id="html">

第二步通过js获取屏幕宽度，并赋值给html

$(document).ready(function () {
    var width = document.body.clientWidth;
    document.getElementById("html").style.fontSize = width + "px";
})

第三步设置css

html {font-size:380px; }
body {margin: 0px; padding: 0px;}
.Dingcanmain {width: 1rem; height:auto ;font-size: 0.05rem;}
.top_top { width: 1rem; height: 0.1342rem; 
           background-image: url('../Images/DingCan/top.png'); 
           filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; 
           -moz-background-size: 100% 100%; background-size: 100% 100%; 
}

这里的html {font-size:380px; }注意单位为px，为js不生效时的大小。

注意其他单位用rem，rem是和html {font-size:380px; }的相对值，

我的border的宽度是1px，好像用rem没用，还是用px

rem的用法如果不知道参考博文http://www.w3cplus.com/css3/define-font-size-with-css3-rem