移动端适配

Posted on

移动端适配

meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
目前主流浏览器使用
initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。

媒体查询

响应式

  • 我的理解就是用来辨别屏幕大小从而来使用不同的css样式达到大小屏幕的自适应

  • 例如 iphone5/5s 屏幕宽度为 320 iphone6/7/8 屏幕宽度为 375

    1
    2
    3
    <!-- link元素中的CSS媒体查询 -->
    <link rel="stylesheet" media="(max-width: 320px)" href="iphone5.css" />
     <link rel="stylesheet" media="(min-width: 321px) and (max-width: 375px)" href="iphone678.css" />

    以上例子就是当屏幕最大为320px时 使用iphone.css
    以上例子就是当屏幕最小321px最大为375px时 使用iphone678.css

    也可以在css中给某些元素设置 

    1
    2
    3
    4
    5
    6
    7
    8
     <!-- 样式表中的CSS媒体查询 -->
    <style>
    @media (max-width: 320px) {
    .nav {
      display: none;
      }
    }
    </style>
  • 而有些公司对于移动端的适配 都是后台开发人员根据屏幕的尺寸来使用 不同的html ， 如写代码啦
  • 还有比如淘宝的适配就是不同的设备访问的网站不同 比如电脑访问淘宝就是taobao.com ,手机访问就是m.taobao.com

动态REM

  • 为了在不同的手机页面显示的内容及布局都是一样的 ， 比如说 iphone5 宽度是320px

    iphone6 宽度是375px

    整体的显示效果是一样的，苹果6会显示的大一点。 网页会随着不同的手机而进行等比的放大与缩小，那么动态rem就是用来解决这个 问题的

单位

常用的有
  • px 就是像素点的意思
  • em 一个M的大小 ，或者不是很正确的一个汉字大小 ，相对于当前元素的font-size
  • vh 视口高度的1/100，其次，它不像rem那样被广泛支持。
  • vw 视口宽度的1/100，其次，它不像rem那样被广泛支持。
  • rem root em 根的em ，一个文档的根是html ，也就是1rem === html的font-size

计算rem

  • 利用js获取页面宽度， 设置根元素的font-size 

    1
    2
    3
    4
    <script>
        var pageWidth = window.innerWidth;
        document.write('<style>html{font-size:'+ pageWidth/10 +'px;}</style>')
    </script>

  • 这样的话 1rem 就相当与 页面宽度的 10% ， 就能知道具体设置的宽高是多少

  • 但是rem 如果根据设计师的设计搞来写 ， 算rem 会很麻烦 ， 于是就用到了sass 的 px2rem 函数计算

  • windows安装sass 方法
    i 安装ruby
    下载ruby 下载最新版本
    在命令行中输入ruby -v命令来确认是否安装成功：
    ii 安装sass
    Sass是Ruby语言写的，安装Sass必须先安装Ruby。假定你已经安装好了Ruby，接着在命令行输入下面的命令：
    gem install sass ，安装完成后，通过sass -v命令来判断是否安装成功

    装好后 可以在scss 文件中写入

    1
    2
    3
    4
    5
    6
    7
    8
    $rem: 640;    // 设计稿的宽度
    @function px2rem($px) {
      @return ($px / $rem) * 10 + rem;
    }

    div {
      width: px2rem(320px);  // 算出来的 width: 5rem;
    }