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

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

两个方案

  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";

}


#aa{

   width:5rem;

   font-size:0.6vw;

   ...

}

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

#aa{

   width:33.3vw;

   font-size:5vw;

   ...

}

还可以把vw和rem合起来使用，就不用写js的rem了

html {

 font-size: calc(100vw / 3.75);

}

body {

  font-size: 0.14rem;

}

2020/03/04补充

今天甲方说有个人的手机用画布生成的海报里的手机号码超出了画布，但是这个手机号码的文字大小不是固定的，是计算的，不应该会出现超出画布的可能行，打印出来的计算结果也跟我一样是40px，突然意识到这是手机被设置了文字倍数，因为有些人近视什么的，于是就研究了下怎么解决这个问题

<script type="text/javascript">

   var rem = 50 / 750 * document.documentElement.clientWidth;

   document.documentElement.style.fontSize = rem + 'px';

</script>

<body style="font-size: 0.6rem;margin: 0;">

  <span style="font-size: 16px;" id="a">我</span>

  <span style="font-size: 1rem;" id="b">我</span>

  <span style="font-size: 10vw;" id="c">我</span>

  <div style="width: 16px;" id="d"></div>

  <div style="width: 1rem;" id="e"></div>

  <div style="width: 10vw;" id="f"></div>

</body>

在手机浏览器打开上面的网页，打印出当前window的宽度和几个dom元素的宽度，然后再放大或者缩小系统字体，结果的到这个答案

  • window的宽度不会改变
  • font-size属性都会改变
  • width属性用rem的会改变

如何让修改了系统的用户也

  • 宽高都用px或vw-vh去做
  • 对比上面的#a和#d的宽度，计算出放大或者缩小的比例，然后把原本的字体大小适配方案改成百分比，如下，然后给body添加字体大小，大概是0.6/(2-比例)
// 旧

<span>我</span>

<span style="font-size: 0.6rem">我</span>

<span style="font-size: 0.7rem">我</span>

<span style="font-size: 0.8rem">我</span>

// 新

<span>我</span>

<span style="font-size: 100%">我</span>

<span style="font-size: 120%">我</span>

<span style="font-size: 140%">我</span>

适配问题还有，查看文章

  • 1px问题
  • iphoneX适配
  • 横屏适配
// JavaScript检测横屏

window.orientation:获取屏幕旋转方向

window.addEventListener("resize", ()=>{

    if (window.orientation === 180 || window.orientation === 0) {

      // 正常方向或屏幕旋转180度

        console.log('竖屏');

    };

    if (window.orientation === 90 || window.orientation === -90 ){

       // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度

        console.log('横屏');

    }

});


// CSS检测横屏

@media screen and (orientation: portrait) {

  /*竖屏...*/

}

@media screen and (orientation: landscape) {

  /*横屏...*/

}
  • 图片模糊问题
.avatar{

   background-image: url(conardLi_1x.png);

}

@media only screen and (-webkit-min-device-pixel-ratio:2){

   .avatar{

      background-image: url(conardLi_2x.png);

   }

}

@media only screen and (-webkit-min-device-pixel-ratio:3){

    .avatar{

       background-image: url(conardLi_3x.png);

    }

}

css的手机适配的更多相关文章

  1. 手淘的flexible.js解决手机适配问题

    如何使用flexible.js做手机适配 做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewp ...

  2. css 手机适配

    手淘H5移动端适配方案flexible源码分析   移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看 ...

  3. Bootstrap3简单好用，轻松实现手机适配

    个人官网http://FansUnion.cn,前端使用Bootstrap框架.大部分的样式,轻松就实现了. 只是呢,关于导航条,被无数网友吐槽了.      通过手机访问时,导航条把屏幕给完全占居了 ...

  4. Android手机适配——UI图片适配

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/50727753 在Android项目当中,drawable文件夹都是用来放置图片资源 ...

  5. CSS：手机页面，常用字号和布局（工作中用）

    {literal}   {/literal} 公用css .cOrange,.cOrange:visited,.cOrange > a {color: #ff7200;} .border1-to ...

  6. 利用Html.css OPPO手机导航菜单的制作解析

    <body> <div id="top" class="auto"> <div class="nav"> ...

  7. 关于手机适配中的rem的学习随笔

    githup 下载地址 :https://github.com/comjustforfun/remformobile adaptivejs利用rem解决移动端页面开发的自适应问题 页面模板初始化的时候 ...

  8. css横竖屏适配

    Css做到横竖屏适配:定义两个样式 { @media screen and (orientation: portrait){ Css[竖向定义样式] } @media screen and (orie ...

  9. js和css实现手机横竖屏预览思路整理

    实现效果,如上图. 首先,实现手机页面在PC端预览, 则先在网上找到一个手机的背景图片,算好大概内间距,用来放预览的页面,我这里是给手机预览页面的尺寸按iphone5的尺寸来的: 一个手机页面在这里预 ...

随机推荐

  1. cmake学习资料收集

    CMake 学习笔记 : https://www.jianshu.com/p/c417e4ab8b30

  2. python中的异常处理：厌而不舍

      什么是异常? ------异常:不正常的情况 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行.一般情况下,在Python无法正常处理程序时就会发生一个异常. 异常是Pytho ...

  3. SpringBoot与Mybatis-plus整合，代码生成mvc层

    一.添加pom依赖 <!-- mysql驱动 --> <dependency> <groupId>mysql</groupId> <artifac ...

  4. let const var 比较说明

    现在先来做两道练习题 for(var i=0;i<10;i++){ var a='a' let b = 'b' } console.log(a) console.log(b) for(var i ...

  5. HashMap与HashTable源码学习及效率比较分析

    一.个人学习后的见解: 首先表明学习源码后的个人见解,后续一次依次进行分析: 1.线程安全:HashMap是非线程安全的,HashTable是线程安全的(HashTable中使用了synchroniz ...

  6. mac下删除不需要的应用程序

    一般的应用程序删除: 1)可以在 前往--应用程序 中直接删除 2)直接在启动台中按住出现X直接删除. 问题: mac下不出现在应用程序中,启动台中按住也不出现X,也不可以直接拖到废纸篓中删除的应用如 ...

  7. 63 滑动窗口的最大值 &&front(),back()操作前一定要判断容器的尺寸不能为0

    给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值分别为{4,4,6,6,6, ...

  8. 从零开始-建站前的准备之django数据库创建的问题

    稍微熟悉了一下django里面对于数据的操作,发现遇见了好多的问题. django对数据的操作是代码式的操作. 一开始在models里面开始为某个表创建参数,像username,password这样的 ...

  9. Python 爬取 北京市政府首都之窗信件列表-[数据处理]

    日期:2020.01.24 博客期:132 星期五 [代码说明,如果要使用此页代码,必须在本博客页面评论区给予说明] //博客总体说明 1.准备工作 2.爬取工作 3.数据处理(本期博客) 4.信息展 ...

  10. JavaScript内置对象Array、String 的方法

    Array push() //将一个或多个数据加入到数组的末端,并返回新的数组长度. pop() //取出数组中的最后一项,修改length属性,并返回被删除的数据 shift() //取出数组中的第 ...