移动端常见实现方式

最新推荐文章于 2024-07-10 10:14:49 发布

嘿！真的。

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量187

点赞数

文章标签： css html 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_59207203/article/details/129626536

版权

（⼀）、移动端的技术选型

1、单独制作移动端⻚⾯

1>流式布局

就是百分⽐布局，也称为⾮固定像素布局

通过盒⼦的宽度设置成百分⽐来根据屏幕的宽度来进⾏伸缩，不受固定像素的限制，内容向两侧填

充，主要是设置宽度

⼀般配合以下属性使⽤，免得盒⼦⾥⾯的元素，被挤下来

max-width 最⼤宽度（max-height最⼤⾼度）

min-width 最⼩宽度（min-height 最⼩⾼度）

2>、flex弹性布局

3>、rem+媒体查询布局

（

1）、rem单位：相对单位，相对于html根元素的字体⼤⼩，通过更改html⽂字的⼤⼩，改变⻚⾯的

⼤⼩

（2）、媒体查询（meidia Query）：

作⽤：

使⽤@media查询，可以针对不同的媒体类型定义不同的样式

@media可以针对不同的屏幕尺⼨设置不同的样式

当重制浏览器⼤⼩的过程中，⻚⾯也会根据浏览器的宽度和⾼度重新渲染⻚⾯

语法：

@media 媒体类型关键字（媒体特性）{css}

媒体类型（可以同时⽤多个媒体类型，⽤逗号隔开,这样他们之间就是或的关系）

all 所有设备

print 打印设备或打印预览

screen 带屏幕的设备（电脑，⼿机）**

speech 屏幕阅读器

关键字 and not only 来连接

将媒体类型或多个媒体特性连接到⼀起作为媒体查询的条件

and：可以将多个媒体特性连接到⼀起，相当于且的意思

not：排除某个媒体类型，相当于“⾮”的意思，可以省略

only：指定某个特定的媒体类型，可以省略

媒体特性(必须要有⼩括号)

width ⻚⾯可⻅宽度

max-width 视⼝的最⼤宽度（视⼝⼩于指定宽度时就⽣效，⼩于等于xxxpx）

min-width 视⼝的最⼩宽度（视⼝⼤于指定宽度时就⽣效）

max-height 最⼤⾼度

min-height 最⼩⾼度

orientation:landscape 横屏

orientation:portrait 竖屏

常⽤的断点

样式切换的分界点，我们称其为断点，也就是⽹⻚的样式

<style>
 body {
 background-color: red;
 }
 /* 第⼀种⽅式 直接引⼊ */
 /* 在992px-768px之间设置的样式 */
 @media screen and (max-width: 992px) and (min-width: 768px) {
 body {
 background-color: orange;
 }
 }
 /* 可以简写，默认写了screen and */
 @media (max-width: 768px) {
 body {
 background-color: yellowgreen;
 }
 }
 </style>
 <!-- 第⼆种⽅式：外接式，针对不同的界⾯效果，可以写不同的样式，分别引⼊，写的时候，最好从
⼩到⼤来写

 语法：media="媒体类型 关键字 (媒体特性)
 -->
 <link rel="stylesheet" href="./600.css" media="screen and (max-width:
600px) " />

（3）、rem适配⽅案

按照设计稿与设备宽度的⽐例，动态计算并设置html根标签的font-size⼤⼩（媒体查询）

css中，设计稿元素的宽、⾼、相对位置等取值，按照同等⽐例换算为rem为单位的值

根字体=（⼿机横向设备独⽴像素值）/10 例如：iPhone6，根字体=375/10=37.5px 以rem为单位，

即1rem=37.5px

如果设计稿是375px 例如：iPhone6，根字体=375/10=37.5px 以rem为单位，即1rem=37.5px

⻚⾯中数值为：设计值/（设计稿宽度/10）例如：100px/（375px/10）=2.667rem

⼿机横向设备独⽴像素值，可以⽤flexible.js计算，⽤⾥⾯的js去做处理

css元素的设计值换算⽤css中的Cssrem: Root Font Size去实现 px to rem & rpx & vw (cssrem)

（4）、flexible.js实现

⼿机淘宝团队出得移动端适配库，它的原理是将当前设备划分为10等份，但不同设备下，⽐例还是⼀致的。

只要确定当前html⽂字⼤⼩就可以了.