移动端布局方式

Youser511

已于 2022-07-10 20:28:52 修改

阅读量642

点赞数

分类专栏：学习文章标签： html 前端 javascript

于 2022-07-06 16:20:35 首次发布

本文链接：https://blog.csdn.net/qq_45025670/article/details/125627733

版权

学习专栏收录该内容

92 篇文章 1 订阅

订阅专栏

布局方式

流式布局
rem布局
VW布局
响应式布局
flex布局

	移动端一共有三个布局，分别是流式布局、rem布局以及响应式布局，这三种布局是我们现在常用的布局方式，其中流式布局和rem布局是移动端的主要布局，而响应式布局是可以适合PC端、Pad端、移动端。

流式布局

也叫百分比布局。

效果：宽度自适应高度固定

优点：它会根据使用者的设备进行适配，在移动设备屏幕比较大时，流式布局会让更多的内容展现出来。
缺点：由于它会根据设备的屏幕大小进行适配就会使里面的内容有一点比例失调。

很少用到，知道即可

rem布局

页面布局单位：

pt：绝对单位，等同于设备像素
px：相对单位，等同于设备独立像素
em：相对单位，若当前元素未设置font-size则em的取值相对于父元素的font-size计算；若当前元素设置了font-size则em的值相对于自身的font-size计算
rem：即root+em，相对单位，取值相对根元素HTML的font-size计算

rem布局的思路就是设置根元素<html>的font-size，子代元素用rem作为单位进行布局

应该就是响应式布局的前妻，，

VW布局

与rem布局相同，vw是一个相对单位

1vw是1/100 的视口宽度，
iphone6/7/8视口下：
1vw=375/100
vw单位的尺寸=px单位数据/3.75

查看设计稿的宽度375----确定参考设备宽度(视口宽度))—确定vw的尺寸

1vh是1/100的视口高度 1vh=667/100

一个页面不要同时使用vw和vh，取其一即可。

响应式布局

思考：

1：手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号  ==>媒体查询
2：设备宽度不同，HTML标签字号设置多少合适?

媒体查询

媒体查询能够检测视口宽度，然后编写差异化的css样式

当某个条件成立，执行对应的css样式

语法:

//用@开头
@media 媒体类型
and not only

and 将多个媒体特性链接到一起
not 非
only 指定某个特定的媒体类型

@media 媒体类型  and|not|only(min-width:320px){
	  body{
	  font-size:12px;
	  }
}

比如：通过媒体查询，不同宽度，不同背景颜色：

    @media all and (min-width:320px) and (max-width:374px){
      body{
        background-color: red;
      }
    }

    @media all and (min-width:375px) and (max-width:413px){
      body{
        background-color: yellow;
      }
    }

    @media all and (min-width:414px) {
      body{
        background-color: blue;
      }
    }

这里的宽度是浏览器的宽度，也是html的宽度

flexible

手机设备多，屏幕尺寸不一样，视口不仅仅只有3个，要做到都适配，不能一个一个写，要借助js

flexible.js是手淘开发出的一个用来适配移动端的js框架

核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size

引用方法：

<body>
  <script src="./js/flexible.js"></script>
</body>

Bootstray框架

bootstray-pink老师

flex布局

Youser511

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端布局方式

流式布局也叫百分比布局。优点：它会根据使用者的设备进行适配，在移动设备屏幕比较大时，流式布局会让更多的内容展现出来。缺点：由于它会根据设备的屏幕大小进行适配就会使里面的内容有一点比例失调。很少用到，知道即可rem布局的思路就是设置根元素的font-size，子代元素用rem作为单位进行布局应该就是响应式布局的前妻，，思考：媒体查询语法:比如：通过媒体查询，不同宽度，不同背景颜色：这里的宽度是浏览器的宽度，也是html的宽度引用方法：flex布局flex布局......
复制链接

扫一扫