移动端前端适配

最新推荐文章于 2022-12-12 08:17:21 发布
最新推荐文章于 2022-12-12 08:17:21 发布
阅读量331 收藏 1
点赞数
分类专栏： 媒体查询 自适应 响应式布局 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gsy_study/article/details/103777377
版权

目录

 

一、媒体查询（Meida Queries）

缺点

二、百分比布局

三、Flex弹性布局

四、使用rem

rem + viewport

五、视口单位（vw vh）

六、图片响应式

七、响应式布局的成型方案

八、响应式布局的要点

一、媒体查询（Meida Queries）

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

语法：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}

那么问题来了，我怎么判断这个屏幕在多大的时候设置媒体查询的分割点呢？

1、通过js获取当前屏幕的大小

document.documentElement.clientWidth

2、常见分割点

部分来自参考原文链接

img

如果我们选择600px,900px,1200px,1800px作为分割点，可以适配到常见的14个机型：

img

 

 

当然这只是其中的一种分割方案，我们还可以这样划分：480px,800px,1400px,1400px

img

 

 

而作为曾经典型的响应式布局框架，Bootstrap是怎么进行断点的呢？

img

 

 

上面的分割方案不一定满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不适配的情况可以再根据实际情况增加新的分割点。

不管是移动优先还是PC优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是min-width，PC端优先使用的max-width

移动优先:

/* iphone6 7 8 */
body {
    background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) {
    body {
      background-color: red;
    }
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
    }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: #FF00FF;
    }
}
/* pc */
@media screen and (min-width: 1100px) {
    body {
      background-color: black;
    }
}
复制代码

PC优先：

/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
        background-color: blue;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
        background-color: #0FF000;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: #0FF000;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
        background-color: #0FF000;
    }
}

缺点

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

二、百分比布局

通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。

/* pc width > 1100px */
html, body { margin: 0;padding: 0;width: 100%;height: 100%;}
aside {
    width: 10%;
    height: 100%;
    background-color: red;
    float: left;
}
main {
    height: 100%;
    background-color: blue;
    overflow: hidden;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    aside {
      width: 8%;
      background-color: yellow;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: green;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    aside {
      float: none;
      width: 100%;
      height: 5%;
      background-color: yellow;
    }
    main {
      height: calc(100vh - 5%);
      background-color: red;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: blue;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    aside {
      float: none;
      width: 100%;
      height: 3%;
      background-color: black;
    }
    main {
      height: calc(100vh - 3%);
      background-color: red;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    aside {
      float: none;
      width: 100%;
      height: 7%;
      background-color: green;
    }
    main {
      height: calc(100vh - 7%);
      background-color: red;
    }
}
复制代码
  • webkit-min-device-pixel-ratio: 1.5

        是指当时显示屏最小的色倍为1.5倍的
        它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/设备独立像素

       例如iPhone4S，分辨率为：960×640，取屏幕宽度计算，物理像素640px，设备独立像素320px，那么，devicePixelRatio 值为 640px  / 320px = 2，又如iPhone3，计算出来的 devicePixelRatio 值为 320px / 320px = 1

  • 但是我们必须要弄清楚css中子元素的百分比到底是相对谁的百分比。直接上结论吧：
  1. 子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height；
  2. 子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，

  3. 同样子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度；

  4. 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
  5. 跟padding一样，margin也是如此，子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width；
  6. border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度，除了border-radius外，还有比如translate、background-size等都是相对于自身的；
  • 从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：
  • 计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
  • 可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂

三、Flex弹性布局

具体使用见弹性盒子

以天猫为例，meta标签的viewport是固定的，

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

四、使用rem

相对于根元素html的font-size大小决定的。

而em是相对于父元素的

《移动Web资源整理》中写到对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

rem配置参考，适合视觉稿宽度为640px的：

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

一个小demohttp://peunzhang.github.io/demo/rem/index.html

body：

a:

:

在响应式布局中，必须通过js动态控制根元素的font-size大小

/*上述代码中将视图容器分为10份，font-size用十分之一的宽度来表示，最后在header标签中执行这段代码，就可以动态定义font-size的大小，从而1rem在不同的视觉容器中表示不同的大小，用rem固定单位可以实现不同容器内布局的自适应。*/
function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

假设，html我们设置font-size:12px; 也就是说12px相对于1rem，那么18px也就是 18/12 = 1.5rem。
但是相比百分比布局，需要借助JS或media query实现，略有一点瑕疵

rem + viewport

这也是淘宝使用的方案，根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。

根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.

  • 如iphone6 plus的dpr为3, 则页面整体放大3倍, 1px(css单位)在plus下默认为3px(物理像素)
  • 然后viewport设置为1/3, 这样页面整体缩回原始大小. 从而实现高清。

五、视口单位（vw vh）

vw 表示相对于视图窗口的宽度

vh 表示相对于视图窗口高度

除了vw和vh外，还有vmin和vmax两个相关的单位

那么vw或者vh很类似百分比单位。vw和%的区别为：

使用视口单位来实现响应式有两种做法：

1.仅使用vw作为CSS单位

  • 对于设计稿的尺寸转换为为单位，我们使用Sass函数编译

    //iPhone 6尺寸作为设计稿基准
$vm_base: 375; 
@function vw($px) {
    @return ($px / 375) * 100vw;
}

  • 无论是文本还是布局宽度、间距等都使用vw作为单位

    .mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10); // 内间距
        &_item {
            flex: 1;
            text-align: center;
            font-size: vm(10); // 字体大小
            &_logo {
                display: block;
                margin: 0 auto;
                width: vm(40); // 宽度
                height: vm(40); // 高度
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}

  • 1物理像素线（也就是普通屏幕下1px,高清屏幕下0.5px的情况）采用transform属性scale实现

    .mod_grid {
    position: relative;
    &::after {
        // 实现1物理像素的下边框线
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
    ...
}

  • 对于需要保持宽高比的图，应该用padding-top实现

    .mod_banner {
    position: relative;
    padding-top: percentage(100/700); // 使用padding-top
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0; 
    }
}

2.搭配vw和rem

虽然采用vw适配后的页面效果很好，但是它是利用视口单位实现的布局，依赖视口大小而自动缩放，无论视口过大还是过小，它也随着时候过大或者过小，失去了最大最小宽度的限制，此时我们可以结合rem来实现布局

  • 给根元素大小设置随着视口变化而变化的vw单位，这样就可以实现动态改变其大小

  • 限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度

    // rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

六、图片响应式

我觉得挺全

<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">

淘宝实现方式

上面说到的淘宝的实现方式即rem+viewport 缩放来实现。

transform: scale(0.5)

CSS代码：

1
2
3
4
5
6
7
8

div{
    width: 1px;
    height: 100%;
    display: block;
    border-left: 1px solid #e5e5e5;
    -webkit-transform: scaleX(.5);
    transform: scaleX(.5);
}

七、响应式布局的成型方案

现在的css，UI框架等都已经考虑到了适配不同屏幕分辨率的问题，实际项目中我们可以直接使用这些新特性和框架来实现响应式布局。可以有以下选择方案：

  • 利用上面的方法自己来实现，比如CSS3 Media Query,rem，vw等
  • Flex弹性布局，兼容性较差
  • Grid网格布局，兼容性较差
  • Columns栅格系统，往往需要依赖某个UI库，如Bootstrap

八、响应式布局的要点

在实际项目中，我们可能需要综合上面的方案，比如用rem来做字体的适配，用srcset来做图片的响应式，宽度可以用rem，flex，栅格系统等来实现响应式，然后可能还需要利用媒体查询来作为响应式布局的基础，因此综合上面的实现方案，项目中实现响应式布局需要注意下面几点：

  • 设置viewport
  • 媒体查询
  • 字体的适配（字体单位）
  • 百分比布局
  • 图片的适配（图片的响应式）
  • 结合flex，grid，BFC，栅格系统等已经成型的方案

 

 

gsy_study
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端html尺寸,移动端页面的三种尺寸
weixin_39588206的博客
06-17 1523
对于移动端页面来说，所有尺寸都应该明确的归为三类：逻辑像素尺寸相对尺寸1 物理像素尺寸以示范页面为例，在不同尺寸下希望效果如下标题一直按照如图所示铺满三行「相对尺寸」标题下方的分割线上下 margin、主要内容四周的 padding 尺寸依据 device-width 变化 「逻辑像素尺寸」分割线以设备所能达到的最细效果展示 「1 物理像素尺寸」图片宽度占 100%，高度等比缩放 「相对尺寸」正文...
媒体查询常见的媒体尺寸设置
jijsn的博客
08-16 6400
媒体查询常见的媒体尺寸设置
Echarts 数据可视化 HM 教程学习记录
Lyrelion的博客
09-08 854
一.基础布局及样式 1.适配方案 设计稿1920px flexible.js 屏幕分为 24 份 cssrem 插件基准值是 80px（重启后生效） 约束屏幕尺寸： @media screen and (max-width: 1024px) { html { font-size: 42px !important; }} @media screen and (min-width: 1920px) { html { font-size: 80px !important; }.
移动端巧用margin/padding的百分比实现自适应
JaimeCheng的博客
02-21 469
写于2017-07-03，搬家至此； 今天遇到了一个曾经认为的世纪大难题----图片完美的自适应； 重要！敲黑板，划重点！！ 当margin/padding取值形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！-----来自W3C标准 所以，很有必要深入研读下W3C规范； 举个栗子 要求：在每个原图长宽比例不同的情况下，实现如图的效果...
2021.10.13 五种移动端前端适配方案【移动端】
一只白猫罢了
10-13 4903
四种移动端前端适配方案： 通过媒体查询的方式即CSS3的meida queries 以天猫首页为代表的 flex 弹性布局 以淘宝首页为代表的 rem+viewport缩放 rem 方式 1. media queries 实现原理 meida queries 主要是通过查询设备的宽度 来执行不同的 css 代码。 @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ /*你的css代码*/ } 优缺点 2. F
移动端前端适配方案(总结)
01-19
在网上搜了一下，很多面试都会被问到移动端适配方法的问题，最近看了一些文章，这里总结一下。 首先，谈一下目前为止出现的一些关于移动端适配的技术方案： （1）通过媒体查询的方式即CSS3的meida queries （2）以...
解决vue移动端适配问题
10-17
主要介绍了解决vue移动端适配问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3移动端适配的解决方案（老方案）
12-01
用于《vue3移动端适配的解决方案》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/127734001
rem移动端适配
01-28
适配移动端页面，
移动端+pc端自适应适配解决方案
06-29
适用于前端H5 pc端的适自创适配方案，有效解决各个尺寸适配，根据浏览器可视区域自适应元素，使用方法：将资源下载下来，放入单独js文件中，独立写成一个全局方法，如果是vue项目就在main.js中引入。如果是原生js...
前端开发实战：移动端适配CSS技巧
会思想的苇草i的博客
12-12 1641
在前端开发中，移动端适配是指利用CSS技术使网页能够在不同移动设备上呈现良好的显示效果。通过使用响应式布局、媒体查询和弹性布局等技术，开发者可以实现移动端适配，使网页在手机和平板等移动设备上具有良好的可视和交互体验。移动端适配是前端开发中的重要内容，能够提升网站的用户友好性和访问体验。
前端面试之移动端适配篇(转载)
梦凝哲雪
05-23 2651
文章目录 关于像素，括号中为别名设备像素（物理像素）设备无关像素（设备独立像素）设备无关像素与CSS像素之间的关系 —— 页面缩放比设备像素与设备无关像素之间的关系 —— DPR设备像素与CSS像素之间的关系获取DPR的方法 关于视口布局视口（layout viewport）js获取 视觉视口(visual viewport)js获取 理想视口(ideal viewport)js获取设置理想视口 移动端适配解决方案1. viewport（scale=1/dpr）2. rem...
移动端开发适配方案
qq_56088882的博客
11-25 1815
各种布局都有自己的优缺点，一般情况不会只采取一种方案，一般都采用混合技术开发，选取其中一种技术为主，其他技术为辅。
【css】移动端适配
前端学习博客
03-27 3500
【css】移动端适配 文章目录【css】移动端适配一、物理像素（设备像素） && css像素（逻辑像素）设备像素比二、px、em、rem 的区别及使用场景三者的区别：使用场景：rem：三、vw 与 vh四、单位混合使用：calc()五、如何根据设计稿进行移动端适配？ 一、物理像素（设备像素） && css像素（逻辑像素） 像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：css像素和物理像素。 在pc端，通常认为css中,1px所表示的真实长
移动端前端适配方案（总结）
陈迹·清欢的博客
06-10 1004
from:链接 移动端前端适配方案1.Media Queries优点缺点2.Flex弹性布局3.rem + viewport 缩放实现原理4、rem实现 1.Media Queries meida queries 的方式可以说是最早期的移动端布局方式，它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是： @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ /*你的css代码*/ } 优
移动端前端适配方案（总结） -- 面试重点
热门推荐
兔子juan的博客
08-15 7万+
在网上搜了一下，很多面试都会被问到移动端适配方法的问题，最近看了一些文章，这里总结一下。 首先，谈一下目前为止出现的一些关于移动端适配的技术方案： （1）通过媒体查询的方式即CSS3的meida queries （2）以天猫首页为代表的 flex 弹性布局 （3）以淘宝首页为代表的 rem+viewport缩放 （4）rem 方式 1.Media Queri...
前端移动端适配总结
weixin_33890526的博客
10-17 2837
meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片...
移动端Web页面适配方案
weixin_33722405的博客
03-20 753
更新：完整js代码和sass mixin已上传于gitHub，点击此处可获取 =================================================== 移动端Web页面，即常说的H5页面、手机页面、webview页面等。 手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容...
前端面试之移动端适配篇
BIGDgreen
05-13 5636
关于像素，括号中为别名 设备像素（物理像素） DP（Device Pixel），显示屏上的像素点，出厂即确定。 设备无关像素（设备独立像素） DIP（Device Independent Pixel），缩放比为1时，设备独立像素也等于CSS像素（逻辑像素）。我们通过CSS和javascript代码设置的像素都是逻辑像素。在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位，px是一个相对单位，相对的是设备像素(device pixel)。显示器上的小色框就是像素
主流前端移动端适配方案
最新发布
04-19
好的，关于主流前端移动端适配方案，一种常用的方式是使用响应式设计，根据不同设备尺寸和屏幕密度，自动调整页面布局和字体大小。另外，还有使用Viewport、rem、em等CSS单位来实现屏幕适配的方法。您可以根据具体...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值