什么是响应式布局？响应式布局有几种方法？

2024-06-16 18:09:18

目录

什么是响应式布局？

响应式布局的4种方法

媒体查询

百分比

vw/vh

rem

什么是响应式布局？

响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕

响应式布局的4种方法

媒体查询

使用@media可以根据不同的屏幕定义不同的样式，具体代码如下图：

百分比

百分比是相对于包含块的计量单位，通过对属性设置百分比来适应不同的屏幕

包含块：

1. 有父元素相对于父元素

2. 无父元素相对于视口

3. 或者继承于父元素

vw/vh

vw/vh是视口单位，即根据浏览器的窗口大小进行适配

rem

rem（font size of the root element）是指相对于根元素的字体大小的单位，rem只是一个相对单位

题外： rem和em的对比

1. rem和em都是相对单位

2. rem相对于根元素

3. em相对于父元素

情景描述：

1. 设置HTML的根元素的font-size为20px

2. 设置红色的正方形宽高为2rem

3. 设置绿色的正方形宽高为40px

4. 从图中可以看出两个正方形一样宽高

5. 所以1rem === 根元素字号 === 20px ,具体代码如下

项目中如何方便的使用的rem呢？

设想一个场景，如果一个元素的宽需要47px,根元素是20px,如果要适应不同的终端，需要转为rem，除以20px得到相应的rem值,很麻烦，那么就需要找一个可以简单计算的数值，下面就是一个方法呦

1. 设想屏幕宽度为750px，设计稿宽度也为750px

2.设置 font-size = 1rem = 屏幕宽度*100/设计稿宽度 = 100px (乘以100的原因，屏幕宽度/设计稿宽度得出的值是1，而浏览器可以接受的最小字号12px，所以乘以100既可以满足浏览器最小字号的要求，也比较好计算)

3. 屏幕宽度不会只是750px，假设屏幕宽度为width(getBoundingClientRect().width可以获取宽度)，在该宽度下的字号为fontSize

4.

5. 通过上面这个方法可以计算出fontSize的值

刚刚接触CSDN，有不足还请指出哦~，大家一起讨论

什么是响应式布局？响应式布局有几种方法？相关推荐

Mac电脑程序无响应怎么办?mac强制关闭软件的6种方法
虽然Mac电脑一向以运行稳定.流畅而著称,但Mac电脑运行时间长了,难免也会遇到程序卡死无响应的情况,可能是由于程序冲突.缓存不足或者一些bug等情况导致,这个时候我们就需要强制退出这个程序了,下面小 ...
Android设置布局背景为白色的三种方法
一.在xml文件里可以直接设置: android:background="#ffffff" 其他颜色可以看这里;http://blog.csdn.net/yanzi1225627/ ...
android标题白色_Android设置布局背景为白色的三种方法
一.在xml文件里可以直接设置: android:background="#ffffff" 其他颜色可以看这里;http://blog.csdn.net/yanzi1225627/ ...
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
响应式网格项目动画布局_响应式网格及其实际使用方式：常见的UI布局
响应式网格项目动画布局重点 (Top highlight) 第二部分 (Part II) Now that you have a basic understanding of how to use ...
php响应式布局,响应式布局之弹性布局的介绍
响应式布局的实现是前端工程中一个非常大的跨越,它非常灵活的可塑造性使得同一个网站能在不同的终端设备上展现出不同的活力.就今天这个机会,我想与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局. 弹 ...
CCS3的过渡、变换、动画以及响应式布局、弹性布局
CSS3 过渡 .变换.动画在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...
css-适配布局类型-流式布局-响应式布局
制作手机界面时,一般按照2倍的大小去做. 如果设备的宽度大于显示的宽度,可以做一个适配流体布局来个例子,体验代码 PC端可适配移动端电脑,与移动端都可正常显示假设,给每一个a标签加上了边框 ...
html自适应布局_三分钟学会响应式布局和自适应布局
响应式布局和自适应布局详解响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局. 自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态.而在响应式布局中你却得考虑上百种不同的 ...
响应式开发---网页的布局方式、媒体查询、栅格化布局、less语言
1.响应式开发介绍 a.网页布局方式 b.响应式布局优点:用一个页面适配不同终端的展示缺点:产生代码冗余,同时使网页体积变得很庞大,不会因为终端的改变而改变网页的体积,不同终端上有些没有显示出来的 ...

最新文章

热门文章