什么是响应式布局?响应式布局有几种方法? |
您所在的位置:网站首页 › 媒体有几种意思解释图片和文字 › 什么是响应式布局?响应式布局有几种方法? |
目录 什么是响应式布局? 响应式布局的4种方法 媒体查询 百分比 vw/vh rem 什么是响应式布局?响应式布局是同一页面在不同的屏幕上有不同的布局,即只需要一套代码使页面适应不同的屏幕 响应式布局的4种方法 媒体查询使用@media可以根据不同的屏幕定义不同的样式,具体代码如下图: 百分比是相对于包含块的计量单位,通过对属性设置百分比来适应不同的屏幕 包含块: 1. 有父元素相对于父元素 2. 无父元素相对于视口 3. 或者继承于父元素 vw/vhvw/vh是视口单位,即根据浏览器的窗口大小进行适配 remrem(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,有不足还请指出哦~,大家一起讨论 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |