响应式布局有几种办法

响应式布局实现方法都有哪几种

发布 : Web前端培训   发布时间:2021-04-09 10:05:58

品牌型号:联想 YOGA 14c

系统版本:windows7

一:媒体查询

使用@media媒体查询可以针对不同的媒体类型定义不同的样式,特别是响应式页面,可以针对不同屏幕的大小,编写多套样式,从而达到自适应的效果。

二:百分比%

比如当浏览器的宽度或者高度发生变化时,通过百分比单位,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。

三:vw/vh

css3中引入了一个新的单位vw/vh,与视图窗口有关,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度。 任意层级元素,在使用vw单位的情况下,1vw都等于视图宽度的百分之一。

四:rem

rem单位是相对于字体大小的html元素,也称为根元素。 默认情况下,html元素的font-size为16px。所以此时1rem = 16px。

五:flex弹性布局

弹性布局只需要依赖于CSS样式的实现响应式布局的方式,也是最多用到的一种实现响应式的方法。

响应式布局有几种办法
其它答案
牛仔很忙2020-06-22 18:56:36

响应式布局有的方法有:1、媒体查询;2、百分比【%】;3、vw或vh,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度;4、rem单位是相对于字体大小的html元素;5、flex弹性布局。


 相关推荐