阅读 1071

移动端到底如何适配?

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」  ,赢取创作大礼包,挑战创作激励金

前两篇写到了《为什么移动端不能像pc网站一样写》《乔布斯提出的视网膜屏幕是什么概念呢?》 连载阅读体验更佳,了解一下移动端的来世今生的发展,接下来说一下移动端到底如何适配。

适配

视口设置

想要更改布局视口,利用meta标签的viewport来进行设置,除此之外,还可以进行页面的缩放等操作。

viewport相关配置

属性描述
width正整数 或 device-width以像素为单位,定义布局视口的宽度
height正整数 或 device-height以像素为单位,定义布局视口的高度
initial-scale允许是小数定义页面初始缩放比例
minimum-scale0.0 - 10.0定义缩放的最小值
maximum-scale允许是小数定义缩放的最大值(ios10&ios10+无效)
user-scalableyes / no设置是否允许缩放,同上无效

initial-scale = 设备独立像素 / 视觉视口宽度

视觉视口宽度 = 设备独立像素 / initial-scale

注意事项:

  1. ios10 及 ios10+ 设置最大缩放值无效
  2. initial 和 width 是有冲突的
  3. initial 和 最小值 是一致的
  4. 部分安卓机型,不接受width = 具体数值 这样的操作

正常情况下,我们会把初始、最小 、最大都设置为1,不允许用户缩放页面。但是因为maximum无效,后期,我们会通过 js 来禁止缩放

视口设置:

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
复制代码

根据像素比进行适配

这种方式,采用的是,直接写物理像素,还是以 iphone6 为例

iphone6
物理像素750 * 1334
像素比2
设备独立像素375 * 667

布局视口 = 物理像素

<script>
    var meta = document.createElement('meta');
    var scale = 1 / window.devicePixelRatio;
    meta.name = "viewport";
    meta.content="initial-scale="+ scale +",minimum-scale="+ scale+",maximum-scale="+ scale+",user-scalable=no";
    document.head.appendChild(meta);
</script>
复制代码

缺点:非常明显,在写的时候必须要写 物理像素,但实际我们设计图上拿到的,都是css像素

像素的处理是完成了,但是移动端的适配可没有这么简单哦~ 为什么呢?

image.png

同样一个元素,在414 * 736占了屏幕宽度的一半,但是在320*480的屏幕超出了一半,这会产生什么问题?

  1. 按照大屏幕尺寸写,本应该一排显示的内容,在小屏幕因宽度不够,掉下去了
  2. 按照小屏幕写,那你告诉我,我买个大屏是为了什么

image.png

所以这种时候,我们就要对屏幕来进行适配:

换句话说,就是一个元素,小屏手机,我就显示小点,大屏手机,我就显示大点

那么想要做到这点,我们就要来学习以下的内容~ 赶紧来看看~

rem适配

什么是rem? 不觉得 它 和 em 长的很像么?

回顾 em

公式:1em = 1 font-size大小

<style>
    body{
        font-size: 20px;
    }
    div{
        font-size: 15px;
        width: 5em;
        height: 5em;
        background: rebeccapurple;
    }
</style>
复制代码

width = 15 * 5 = 75px;

缺点:font-size 经常会修改,em是根据当前自身的font-size进行计算的,很容易宽高就发生变化。

基于这个问题,我们就要来学习一个新的单位了,叫做 rem

rem -> root em 其实翻译过来就是根据 根节点计算em,这里的根节点指的是<html></html>

<style>
    html{
        font-size: 20px;
    }
    div{
        font-size: 15px;
        width: 5em;
        height: 5em;
        background: rebeccapurple;
    }
</style>
复制代码

width = 20* 5 = 100px;

但是好像~ 并改变不了我们上面提到的问题啊.....别着急! 那是因为你还没有让font-size变化起来

利用js动态设定font-size

<script>
    var html = document.documentElement;
    var widths = html.clientWidth;
    var num = 10;
    html.style.fontSize = widths / num + 'px';
</script>
复制代码

这样的话,你就只要关心rem写多少就好。

下章聊一下移动端的 vw 和 vh

点赞支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。

11.png

往期精彩推荐

《为什么移动端不能像pc网站一样写》

《乔布斯提出的视网膜屏幕是什么概念呢?》

前端常用的几种加密方法

canvas 爬坑路【方法篇】

不懂 seo 优化?一篇文章帮你了解如何去做 seo 优化

canvas 爬坑路【属性篇】

【实战篇】微信小程序开发指南和优化实践

聊一聊移动端适配

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

面试相关推荐

前端万字面经——基础篇

前端万字面积——进阶篇

更多精彩详见:个人主页

文章分类
前端
文章标签