移动端适配

前端小猴

于 2021-10-24 20:39:33 发布

阅读量140

点赞数

分类专栏：移动端文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_55225560/article/details/120940079

版权

移动端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

移动端适配的目的：

工作中接触到了移动端的开发，所以最近学习一下移动端相关内容。

了解viewport：

viewport 即视窗、视口，用于显示网页部分的区域

viewport 详细设置：

通过设置 viewport 可以设置页面大小，通过 meta 标签可以设置 viewport 信息

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

viewport 需要搭配如下几个属性使用：

rem适配

rem是一个相对单位，相对于<html>的font-size来说的；那么参与页面布局的单位使用rem而不是px，这样我们只需控制不同设备下网页<html>的font-size即可做到页面的自适应。


/* 设置html元素的字体大小为 16px，即 1rem = 16px */
html {
    font-size: 16px;
}
/* 设置box元素宽 160px，10rem = 160px */
.box {
    width: 10rem; /* 160px */
}

修改HTML元素的字体大小可以成比例的调整以 rem 为单位的属性，通过这一个特性，我们可以实现将视窗按一定比例划分为一份一份的，当页面内元素刚好分完所有的份数，页面内容即充满整个视窗且无横向滚动条。

以宽度750像素的设计稿为例，有两个元素，一个元素占 550 个像素，另一个占 750 个像素：

// ...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="w-550px"></div>
<div class="full"></div>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .w-550px {
        width: 550rem;
        height: 100px;
        background-color: rgb(209, 255, 240);
    }
    .full {
        width: 750rem;
        height: 100px;
        background-color: rgb(195, 200, 199);
    }
</style>
<script>
    function setRem() {
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改
        const scale = document.documentElement.clientWidth / 750;
        document.documentElement.style.fontSize = scale + 'px';
    }
    setRem();
    window.onresize = setRem;
</script>

2. vw/vh 布局

vw/vh 方案与 rem 方案类似，都是将页面分成一份一份的，只不过 vw/vh 是将页面分为 100 份，1vw = device-width/100：

css代码：

.test-vw {
  width: 375px;
  height: 100px;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  background: #13b5b1;
}

/* 转换后 */
.test-vw {
    width: 50vw;
    height: 13.333333vw;
    font-size: 5.333333vw;
    text-align: center;
    line-height: 13.333333vw;
    background: #13b5b1;
}

3. 百分比布局：

在 css 中，我们可以使用百分比来实现布局，但是需要特定宽度时，这个百分比的计算对开发者来说并不友好，且元素百分比参考的对象为父元素，元素嵌套较深时会有问题

案例：设计稿为 750*1136，我们需要一个宽度为 200px 的盒子

.box {
  /* w = 200 / (750/100) = 26.66667 */
  /* 可知，计算复杂，且会存在误差 */
  width: 26.6%;
}

扩展： 子元素的 width 和 height 百分比参考对象是父元素的 width 和 height，margin、padding 的参考对象为父元素的 width，border-radius、background-size、transform: translate()、transform-origin 的参考对象为自身宽高；

4. 响应式布局

通过媒体查询，可以针对不同的屏幕进行单独设置，但是针对所有的屏幕尺寸做适配显然是不合理的，但是可以用来处理极端情况（例如 IPad 大屏设备）或做简单的适配（隐藏元素或改变元素位置）；

body {
  background-color: yellow;
}
/* 针对大屏产品 ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: blue;
    }
}

移动端适配的宗旨是：让拥有不同屏幕大小的终端设备拥有一致的 UI 界面，让拥有更大屏幕的终端展示更多的内容。

我们从页面编写的角度出发，页面中更多的是文本和布局，关于文本，我们应该使用 px 作为单位，来实现在大屏设备显示更多的内容，而不是更大的文本；关于布局，我们可以使用 flex 实现弹性布局，当实现特定宽高元素时，可以适当的使用 vw/vh，当特定的值使用 vw/vh 计算复杂或存在误差时，也可以使用 rem：

适配流程：

编写 <meta> 标签设置 viewport 的内容 width=device-width，让网页宽度等于视窗宽度
在 css 中使用 px
在适当的场景使用flex布局，或者配合vw进行自适应
在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询
在跨设备类型如果交互差异太大的情况，考虑分开项目开发

前端小猴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端适配

移动端适配的目的：工作中接触到了移动端的开发，所以最近学习一下移动端相关内容。了解viewport：viewport 即视窗、视口，用于显示网页部分的区域viewport 详细设置：通过设置viewport可以设置页面大小，通过meta标签可以设置viewport信息<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-sacl...
复制链接

扫一扫

专栏目录