css的手机适配

时间：2022-02-12 05:59:03

在html篇里提到设置视口宽度和设备宽度，固定的meta配置就是写死的，死记硬背

应该清楚的是手机端的适配应该克服的难题就是宽度根据手机屏幕的大小变化，而高度却没有办法跟随比例变化，也就是宽高比，比如在手机上要一行上排列三个div放正方形的三个div，要怎么做，三个div浮动排列后各自设置width为33.3%，那高度呢，在pc端可以直接100*100，但是手机不行，不等比排列太难看了

实现手机宽高比,就是手机端适配的终极目标

现在最常见的宽高比方案有两个

  1. 一个是rem
  2. 一个vw，vh的css3的api

在css里有px和em还有rem

  1. px就是固定的，是指一个视口像素，而不是设备像素，很高深，不用深究，px是个固定的计量单位
  2. em是相对父元素的字体大小的大小，比如父元素的字体大小是16px，那1em就是16px，他不是个固定值，是个相对值，非常不常用，用处就是在一些文章的段落前用2em作为两个字的缩进
  3. 而rem也是个相对值，但相对的不是父元素的字体大小，而是html标签的字体大小，而html就是跟手机宽度相等的存在，也就是说只要把html的字体大小设置为375px，那1rem就是375px，再把div高度设置成0.33rem,这样就可以实现永远正方形的div，这就是传说中的rem适配

rem的关键点就是如何去给html标签设置跟设配宽度一样的字体大小，而现实是只能用js去实现，而且为了更好的计算，不能计算为1rem去等于设备宽度，这样如果要10px就是零点零几的rem，正确的做法是让html等于10rem，15rem，20rem，我一般是用15rem，就是375/15=25，也就是1rem=25px，16px的正常字体大小就是16/25约等于0.65rem，rem的单位是可以代替所有的px的存在的，比如padding，margin，border，img-width等等都是可以用rem的，这样不管在怎么样大小的手机上大小，任何一个元素的宽高比都是一样的，也就是等比缩放

js代码如下

window.onload = function(){
    /* 第一个参数是你想让 1rem 等于多少像素，第二个参数是设计稿的宽度 */
    getRem(50,750)
};
window.onresize = function(){
    getRem(50,750)
};
function getRem(prem,pwidth){
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    document.documentElement.style.fontSize = prem/pwidth*oWidth   "px";
}

如果看不懂js写了什么，也不用管，固定写法，写进去就可以用了

上面讲了css的3个计量单位，而css3出现了一个新的计量单位vw , vh，这两个是相对于手机设备宽度的固定值，相对的固定值怎么理解呢，就是不管在任何设备，100vw就是等屏幕一样宽，100vh就是跟屏幕一样高，所以宽高都是33.3vw的div就是一个永远固定的正方形

相关文章