CSS移动端适配

CSS移动端适配

一:前端开发的常用单位

1.像素(px)

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

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

2.百分比(%)

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

  2. 百分比特点
    2.1 子元素宽度(width)是参考父元素宽度(width)计算的
    2.2 子元素高度(height)是参考父元素高度(height)计算的
    2.3 子元素padding无论是水平还是垂直方向都是参考父元素宽度(width)计算的
    2.4 子元素margin无论是水平还是垂直方向都是参考父元素宽度(width)计算的
    2.5 不能用百分比设置元素的border

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

3.em

  1. 什么是em?
    em是前端开发中的一个动态单位, 是一个相对于元素字体大小的单位
    例如font-size: 12px; ,那么1em就等于12px

  2. em特点
    2.1 当前元素设置了字体大小, 那么就相对于当前元素的字体大小
    2.2 当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小
    2.3 如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小 google的是16px

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

4.rem

  1. 什么是rem?
    rem就是root em, 和em是前端开发中的一个动态单位,
    rem和em的区别在于, rem是一个相对于根元素字体大小的单位
    例如 根元素(html) font-size: 12px; ,那么1em就等于12px

  2. rem特点
    2.1 除了根元素以外, 其它祖先元素的字体大小不会影响rem尺寸
    2.2 如果根元素设置了字体大小, 那么就相对于根元素的字体大小
    2.3 如果根元素没有设置字体大小, 那么就相对于浏览器默认的字体大小

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

5.vwvh

  1. 什么是vw(Viewport Width)和vh(Viewport Height)?
    1.1 vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位
    1.2 系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一
    1.3 vw和vh和百分比不同的是, 百分比永远都是以父元素作为参考
    而vw和vh永远都是以视口作为参考

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

6.vmin和vmax

  1. 什么是vw(Viewport Width)和vh(Viewport Height)?
    vmin: vw和vh中较小的那个
    vmax: vw和vh中较大的那个
    使用场景: 保证移动开发中屏幕旋转之后尺寸不变
    获取视口的宽高
    window.innerWidth, window.innerHeight

二:移动端视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

1.什么是视口?

视口简单理解就是可视区域大小我们称之为视口
在pc端,视口就是浏览器窗口可视区域的大小
在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980

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

 <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:用户是否可以手动缩放

三:移动端适配方案一

1.通过媒体查询
 媒体查询的方式可以说是我早期采用的布局方式,
 它主要是通过查询设备的宽度来执行不同的css代码,最终达到界面的配置
 
 2.媒体查询优势
 简单, 哪里不对改哪里
 调整屏幕宽度的时候不用刷新页面即可响应式展示
 特别适合对移动端和PC端维护同一套代码的时候

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

 4.应用场景
 对于比较简单(界面不复杂)的网页, 诸如: 企业官网、宣传单页等
 我们可以通过媒体查询、伸缩布局、Bootstrap来实现响应式站点

四:移动端适配方案二

1.通过媒体查询 + rem
虽然我们将移动端独立到一套代码中了, 但是由于移动端也有很多的屏幕尺寸, 所以也需要进行适配
例如:
iPhone3/4/5:  320px
iPhone678:    375px
iPhoneX/plus: 414px

当下在企业开发中设计师提供给我们的移动端设计图片是750*xxx的或者1125*xxx的
所以我们需要对设计师提供的图片进行等比缩放, 这样才能1:1还原设计图片

2.如何等比缩放?
2.1将设计图片等分为指定份数,求出每一份的大小
   例如: 750设计图片分为7.5份, 那么每一份的大小就是100px
2.2将目标屏幕也等分为指定份数,求出每一份的大小
   例如: 375屏幕也分为7.5份, 那么每一份的大小就是50px

2.3用 原始元素尺寸 / 原始图片每一份大小 * 目标屏幕每一份大小 = 等比缩放后的尺寸
   例如: 设计图片上有一个150*150的图片, 我想等比缩放显示到375屏幕上
   那么: 150 / 100 * 50 = 1.5*50 = 75px

3.如何在前端开发中应用这个计算公式?
3.1目标屏幕每一份的大小就是html的font-size: 50px
3.2使用时只需要用 "原始元素尺寸 / 原始图片每一份大小rem" 即可
                  150 / 100 = 1.5 / 1.5rem
                  1rem = 50px  / 1.5rem === 1.5*50 = 75px
 对于比较复杂(界面复杂)的网页, 诸如: 电商、团购等
 更多的则是才是PC端一套代码, 移动端一套代码

五:移动端适配方案三

通过媒体查询的方法,需要写一大堆的对font-size的设置,这个太不方便了
况且一般在移动端用的手机浏览的网页,手机大小是固定的
可以通过用javascript的方式来操作html根元素的font-size的值
    注意点: 
    通过JS动态计算当前屏幕每一份大小的好处: 不用写很多的媒体查询
    坏处: 切换了屏幕尺寸之后需要刷新界面才有效,而媒体查询如果切换了屏幕的尺寸不需要重新刷新界面
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";

六:设备像素和css像素

1.什么是设备像素和CSS像素?
1.1设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点,只有屏幕一经出厂就固定不会改变
1.2CSS像素又称为逻辑像素,是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素

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

3.什么时候不一样?为什么不一样?
3.1在PC端,1个CSS像素往往都是对应着电脑屏幕的1个物理像素,
 所以我们无需关心PC端的CSS像素和设备像素

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

七:移动端适配的最终方案

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

2.获取设备像素比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 获取当前的设备像素

3.如何缩小?
    通过 <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.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";

八:pc or 移动端界面自动跳转

   <script>
 2     /*
 3     1.如何实现PC端一套代码,移动端一套代码,
 4     在PC端打开自动打开PC端界面
 5     在移动端打开自动打开移动端界面
 6 
 7     2.实现步骤:
 8     2.1默认打开PC端界面
 9     2.2在PC端界面中通过BOM拿到当前浏览器信息
10     2.3通过正则判断当前浏览器是否是移动端浏览器
11     2.4通过BOM的location对象实现跳转到移动端界面
12     * */
13 
14     /*
15     PC:     Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36
16     移动端: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1
17     移动端: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Mobile Safari/537.36
18     * */
19     // let userAgentInfo = navigator.userAgent;
20     // console.log(userAgentInfo);
21     function isPc() {
22         let userAgentInfo = navigator.userAgent;
23         if(/iphone/i.test(userAgentInfo)){
24             return false;
25         }else if(/android/i.test(userAgentInfo)){
26             return false;
27         }
28         return true;
29     }
30     if(!isPc()){
31         location.href = "http://m.jd.com";
32     }
33 </script>

原文:CSS移动端适配

相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页