zoukankan      html  css  js  c++  java
  • 移动端适配

    移动web开发常见单位

    1.什么是像素(Pixel)?

    ​ 在前端开发中视口的水平方向和垂直方向是由很多小方格组成的,一个小方格就是一个像素;例如div尺寸是100 x 100,那么水平方向就占用100个小方格,垂直方向就占用100个小方格。

    2.像素特点

    ​ 不会随着视口大小的变化而变化, 像素是一个固定的单位(绝对单位)

    3.什么是百分比?

    ​ 百分比是前端开发中的一个动态单位, 永远都是以当前元素的父元素作为参考进行计算,例如父元素宽高都是200px,设置子元素宽高是50%,那么子元素宽高就是100px。

    4.百分比特点

    ​ 4.1 子元素宽度是参考父元素宽度计算的

    ​ 4.2 子元素高度是参考父元素高度计算的

    ​ 4.3 子元素padding无论是水平还是垂直方向都是参考父元素宽度计算的

    ​ 4.4 子元素margin无论是水平还是垂直方向都是参考父元素宽度计算的

    ​ 4.5 不能用百分比设置元素的border

    ​ 结论: 百分比是一个动态的单位, 会随着父元素宽高的变化而变化(相对单位)

    5.什么是em?

    ​ em是前端开发中的一个动态单位, 是一个相对于元素字体大小的单位

    ​ 例如font-size: 12px; ,那么1em就等于12px

    6.em特点

    ​ 6.1 当前元素设置了字体大小, 那么就相对于当前元素的字体大小

    ​ 6.2 当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小

    ​ 6.3 如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小,谷歌浏览器默认字体大小16px

    ​ 结论: em是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)

    7.什么是rem?

    ​ 7.1 rem就是root em, 和em是前端开发中的一个动态单位,

    ​ 7.2 rem和em的区别在于, rem是一个相对于根元素字体大小的单位

    ​ 例如 根元素(html) font-size: 12px; ,那么1em就等于12px

    ​ 7.3.rem特点

    ​ 7.3.1除了根元素以外, 其它祖先元素的字体大小不会影响rem尺寸

    ​ 7.3.2如果根元素设置了字体大小, 那么就相对于根元素的字体大小

    ​ 7.3.3如果根元素没有设置字体大小, 那么就相对于浏览器默认的字体大小

    ​ 结论: rem是一个动态的单位, 会随着根元素字体大小的变化而变化(相对单位)

    8.什么是vw(Viewport Width)和vh(Viewport Height)?

    ​ 8.1vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位

    ​ 8.2系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一

    ​ 8.3vw和vh和百分比不同的是, 百分比永远都是以父元素作为参考,而vw和vh永远都是以视口作为参考

    ​ 结论: vw/vh是一个动态的单位, 会随着视口大小的变化而变化(相对单位)

    9.什么是vmin和vmax?

    ​ vmin: vw和vh中较小的那个

    ​ vmax: vw和vh中较大的那个

    使用场景: 保证移动开发中屏幕旋转之后尺寸不变,,移动开发中常用
    

    视口

    console.log(window.innerWidth, window.innerHeight); // 获取视口宽度和大小
    

    什么是视口?

    ​ 视口简单理解就是可视区域大小我们称之为视口

    ​ 在PC端,视口大小就是浏览器窗口可视区域的大小

    在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980
    

    ​ 2.移动端为什么是视口是980而不是其他的值?

    ​ 因为过去网页的版心都是980,乔布斯为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980。后来谷歌也觉得这是一个非常牛X的方案, 所以Android手机的视口也定义为了980。

    ​ 3.移动端自动将视口宽度设置为980带来的问题

    ​ 虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页,但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的,所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小(和前面讲解Canvas时讲解的viewbox一样, 近大远小原理)。

    ​ 4.如何保证在移动端不自动缩放网页的尺寸?

    通过meta设置视口大小
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     	width=device-width 设置视口宽度等于设备的宽度
     	initial-scale=1.0 初始缩放比例, 1不缩放
     	maximum-scale:允许用户缩放到的最大比例
    	minimum-scale:允许用户缩放到的最小比例
    	user-scalable:用户是否可以手动缩放, user-scalable=no,禁止用户缩放,防止页面布局错乱
    

    移动端常用适配方案

    通过媒体查询

    ​ 媒体查询的方式可以说是我早期采用的布局方式,

    ​ 它主要是通过查询设备的宽度来执行不同的css代码,最终达到界面的配置

    媒体查询优势

    ​ 简单, 哪里不对改哪里,调整屏幕宽度的时候不用刷新页面即可响应式展示,特别适合对移动端和PC维护同一套代码的时候

    媒体查询劣势

    ​ 由于移动端和PC端维护同一套代码, 所以代码量比较大,维护不方便,为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源,为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式。

    应用场景

    ​ 对于比较简单(界面不复杂)的网页, 诸如: 企业官网、宣传单页等,我们可以通过媒体查询、伸缩布局、Bootstrap来实现响应式站点。对于比较复杂(界面复杂)的网页, 诸如: 电商、团购等,更多的则是才是PC端一套代码, 移动端一套代码。

    媒体查询的格式
    @media 条件 {} 含义: 如果条件满足, 那么就执行后面{}中的代码
    1. 内联格式: @media 条件 {}
    2. 外链格式: <link rel="stylesheet" href="css/xxx.css" media="条件">
    /*如果当前的网页是显示在电脑or平板or手机上的, 并且当前浏览器的宽度是大于等于1200px的, 那么就执行后面大括号中的代码*/
    @media screen and (min- 1200px){
        div{
             500px;
            height: 500px;
            background: red;
        }
    }
    /*如果当前的网页是显示在电脑or平板or手机上的, 并且当前浏览器的宽度是小于等于1199px的, 那么就执行后面大括号中的代码*/
    @media screen and (max- 1199px){
        div{
             300px;
            height: 300px;
            background: green;
        }
    }
    /*如果当前的网页是显示在电脑or平板or手机上的, 并且当前浏览器的宽度是小于等于768px的, 那么就执行后面大括号中的代码*/
    @media screen and (max- 768px){
        div{
             100px;
            height: 100px;
            background: blue;
        }
    }
    

    界面自动跳转

    PC端一套代码,移动端一套代码

    ​ 在PC端打开自动打开PC端界面,在移动端打开自动打开移动端界面

    实现步骤:

    ​ 1 默认打开PC端界面

    ​ 2 在PC端界面中通过BOM拿到当前浏览器信息

    ​ 3 通过正则判断当前浏览器是否是移动端浏览器

    ​ 4 通过BOM的location对象实现跳转到移动端界面

    通过媒体查询 + rem

    虽然我们将移动端独立到一套代码中了, 但是由于移动端也有很多的屏幕尺寸, 所以也需要进行适配

    例如: iPhone3/4/5: 320px iPhone678: 375px iPhoneX/plus: 414px

    首先要判断当前页面的rem大小,假设移动web端rem = 25px,视口宽度vm = 375px, 375 / 25 = 15份。
    一张750px宽的图片,750 / 15 = 50px/份。750 / 50 * 25 = 375px,所以在vm = 375px的手机上,750px的实际宽度为375px。750px图片宽度就是15rem。
    html{
     	font-size: 50px;
    },, 1rem = 50px
    

    ​ 当下在企业开发中设计师提供给我们的移动端设计图片是750xxx的或者1125xxx的

    ​ 所以我们需要对设计师提供的图片进行等比缩放, 这样才能1:1还原设计图片

    如何等比缩放?

    ​ 1 将设计图片等分为指定份数,求出每一份的大小

    ​ 例如: 750设计图片分为7.5份, 那么每一份的大小就是100px

    ​ 2 将目标屏幕也等分为指定份数,求出每一份的大小

    ​ 例如: 375屏幕也分为7.5份, 那么每一份的大小就是50px

    ​ 3 用原始元素尺寸 / 原始图片每一份大小 * 目标屏幕每一份大小 = 等比缩放后的尺寸

    ​ 例如: 设计图片上有一个150*150的图片, 我想等比缩放显示到375屏幕上

    ​ 那么: 150 / 100 * 50 = 1.5*50 = 75px

    如何在前端开发中应用这个计算公式?

    ​ 目标屏幕每一份的大小就是html的font-size: 50px,使用时只需要用 "原始元素尺寸 / 原始图片每一份大小rem" 即可。150 / 100 = 1.5 / 1.5rem,,1rem = 50px 那么 1.5rem === 1.5*50 = 75px

    大公司应用实例

    ​ 网易新闻、苏宁易购

    注意点: 通过JS动态计算当前屏幕每一份大小的好处: 不用写很多的媒体查询。坏处: 切换了屏幕尺寸之后需要刷新界面才有效,而媒体查询如果切换了屏幕的尺寸不需要重新刷新界面
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    

    设备像素和CSS像素

    什么是设备像素和CSS像素?

    ​ 1、设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点,只有屏幕一经出厂就固定不会改变

    ​ 2、CSS像素又称为逻辑像素,是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素

    例如: 
    ​ iPhone3G/iPhone3GS 3.5英寸/ 逻辑像素320*480 / 设备像素320*480
    ​ iPhone4/4S         3.5英寸/ 逻辑像素320*480 / 设备像素640*960
    也就是说CSS像素和设备像素在有的时候是不一样的
    

    ​ 在PC端,1个CSS像素往往都是对应着电脑屏幕的1个物理像素,所以我们无需关心PC端的CSS像素和设备像素。

    ​ 3、在手机端,最开始其实1个CSS个像素也是对应着手机屏幕的1个物理像素,但是后来一个改变世界的男人(乔布斯)改变了这一切。从iPhone4开始,苹果公司推出了所谓的retina视网膜屏幕。iPhone4的屏幕尺寸却没有变化,但是像素点却多了一倍,这就导致了设置1个CSS像素就会占用2个物理像素。所以仔细观察你会发现同样是1像素但是在retina视网膜屏幕的手机上会粗一些

    如何解决设备像素和CSS像素不一样的问题?

    如果设备像素和CSS像素一样, 那么无需处理不会带来任何负面影响,如果设备像素是CSS像素的2倍, 那么我们只需将CSS像素缩小一半即可,但是有时候设备像素可能是CSS像素的3倍/4倍...

    获取设备像素比DPR(Device Pixel Ratio)

     DPR = 设备像素 / CSS像素
    ​ iPhone3GS :  320 / 320 = 1
    ​ iPhone4S:    640 / 320 = 2
    ​ iPhone678:   750 / 375 = 2
    ​ iPhoneX:     1125 / 375 = 3
    在JS中我们可以通过 window.devicePixelRatio 获取当前的设备像素比
    

    如何缩小?

    通过 <meta name="viewport">的initial-scale属性来缩小
    注意点: 缩放视口后视口大小会发生变化
    let scale = 1.0 / window.devicePixelRatio;
    let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
    document.write(text); // 这个设置像素比
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";  // 这个解决适配
    
  • 相关阅读:
    Android 编辑框(EditText)属性学习
    读书笔记 -《高效程序猿的45个习惯-敏捷开发修炼之道》
    Launcher3实现壁纸居中
    Trie树的常见应用大总结(面试+附代码实现)
    LeetCode Summary Ranges
    abap选择屏幕上的button
    SQLite Expert表分离和解决SQLite Expert删除表后大小不变的问题
    git push 失败
    动态限制EdiText仅仅能输入特定字符
    DateTime类常用技巧摘录
  • 原文地址:https://www.cnblogs.com/meihao1203/p/14905674.html
Copyright © 2011-2022 走看看