20190303 移动端适配viewport、vw、rem、媒体查询

viewport

  • 概念

    viewport是用户网页的可视区域,又叫做‘视区’。

    比如我们有时使用移动设备访问pc端页面的时候会看到一个横向的滚动条,这里的可显示区域的宽度就是viewport的宽度。

  • 属性

    • width: 控制 viewport 的大小,比如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
    • initial-scale: 初始(页面第一次load)缩放比例
    • user-scalable: 是否允许手动缩放
  • 典型配置

    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover" />

    其含义就是将视口设置为 css像素 = 设备像素,即我们在页面中设置的1个CSS像素大小就等于1个设备像素大小。

    viewport-fit=cover结局iphoneX的“刘海”问题。(最后补充有像素的几个概念)

VW方案

比如:设计稿 750px; 100vw = 750px; 1vw = 7.5px;把视觉稿的px用vw解决。

将px单位转换成vw单位的方法,使用 postcss-px-to-viewport 基本配置:

	{ 
	  viewportWidth: 750, // 视口宽度
	  viewportHeight: 1334, // 视口高度
	  unitPrecision: 5, // 保留位数
	  viewportUnit: 'vw', // 希望使用的视口单位
	  selectorBlackList: ['.ignore', '.hairlines'], // 需要忽略的CSS选择器,保留原本单位,不会转为视口单位
	  minPixelValue: 1, // 设置最小的转换数值为1,只有大于1的值会被转换
	  mediaQuery: false // 媒体查询里的单位不需要转换单位 
	}

更多配置参考:https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md

解决元素容器宽高比问题:postcss-aspect-ratio-mini

解决1px的问题:postcss-write-svg

iPhone X 适配:

  1. meta标签viweport-fit属性,让页面内容完全覆盖整个窗口
  2. “刘海儿” 和 底部小黑条遮挡问题,在CSS中配置constant(safe-area-inset-*) 以及 env(safe-area-inset-bottom)

rem

  • 概念

    使用rem单位的元素会根据不同屏幕设定好的根元素的font-size自动显示相应的尺寸。

  • rem的计算

    const oHtml = document.getElementsByTagName('html')[0]
    const width = oHtml.clientWidth;
    // 320px的屏幕基准像素为12px
    oHtml.style.fontSize = 12 * (width / 320) + "px";
    

    使用JS来获取屏幕宽度的好处在于可以100%适配所有的机型宽度,既然是JS代码,为了避免造成因为动态设置元素的font-size而造成页面抖动,一般这部分代码我们放在header底部去加载,并内联到html文档里面。

  • 如何将视觉稿中的px转换成rem

    比如视觉稿是以750px进行设计的:

    flexible将视觉稿分成了100份,每份被称为a,同时1rem被认为是是10a,我们可以计算出:

    1a = 7.5px; 
    1rem = 75px; // 根标签对应的font-size值就是75px;
    

媒体查询

  • 概念

    根据不同的屏幕编写不同的代码。

  • 缺点
    无法实现100%兼容,区间内无法进行区分。额外的代码工作量等。

  • 例子

    @media screen and (min-width: 375px){
      html {
        font-size: 14.0625px;   
      }
    }
    @media screen and (min-width: 360px){
      html {
        font-size: 13.5px;
      }
    }
    @media screen and (min-width: 320px){
      html {
        font-size: 12px;
      }
    }
    html {
      font-size: 16px;
    }
    

小结:文本px、图片百分比、宽高间距等rem,再加flex布局。还可以参考成熟的flexible.js(https://www.jianshu.com/p/04efb4a1d2f8)

一个简单易用的库 FastClick

它消除了移动端浏览器上的物理点击和触发一个 click 事件之间的 300ms 的延迟。

介绍:https://www.awesomes.cn/repo/ftlabs/fastclick

安装使用:https://www.npmjs.com/package/fastclick

 <script src="//path/fastclick/1.0.6/fastclick.js"></script>
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

了解移动单位

单位特点
rem以根元素字体大小为基准
em以父元素字体大小为基准

了解像素

  • 概念

    • css像素(Pixel): 代码中使用到的逻辑像素,实际并不存在的。

    • 设备独立像素(Device Independent Pixel): 可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素。

    • 设备像素(Device Pixel): 设备能控制显示的最小单位,也就是物理像素,我们通常说的1920×1080像素分辨率就是用的设备像素单位

    • dpr(device pixel ratio): 设备像素比,即:dpr = dp/dpi

        查看dpr大小:window.devicePixelRatio
      
    • ppi(pixel per inch): 每英寸所包含的像素点数目,数值越高,说明屏幕能以更高密度显示图像。

      120-160之间的手机被归为低密度手机
      160-240被归为中密度
      240-320被归为高密度
      320以上被归为超高密度(例如苹果公司的Retina显示屏)
      

      在这里插入图片描述

  • 关系

    • pc端 —— 在正常未缩放的情况下,一个dip等于一个dp,如果缩放200%,则一个dip等于两个dp。

    • 移动端 —— 在标准屏幕(160ppi)下,一个dip等于一个dp。

  • 说说使用

    • 在非标准屏幕上以同样的大小显示一张图片

      图片缩放大小(dp) = 图片css大小(dip) * dpr

  • 重点掌握

    移动端页面开发时我们通常配置元信息`<meta name="viewport" content="width=device-width" />`,
    其含义就是将视口设置为 css像素 = 设备像素,即我们在页面中设置的1个CSS像素大小就等价于1个设备像素大小。
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值