响应式布局的实现方式(5种)

君哥 阅读:1865 2021-12-10 19:04:13 评论:3

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


一、百分比布局 

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


包含块:


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


2. 无父元素相对于视口


3. 或者继承于父元素



  
    
    
    
     %和rem 布局
    
  
  
    
      
    
    
  


二、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布局
    
  
  
    
    
  



项目中如何方便的使用的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.width/(750*fontsize)=750/(750*100) 

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

 


三、 媒体查询 @media screen               



  
    
    
    
    @media screen
    
  
  
    
  


四 flex布局  

五、vw 和 vh

vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度,除了vw和vh外,还有vmin和vmax两个相关的单位。各个单位具体的含义如下:


单位 含义

vw 相对于视窗的宽度,1vw 等于视口宽度的1%,即视窗宽度是100vw

vh 相对于视窗的高度,1vh 等于视口高度的1%,即视窗高度是100vh

vmin vw和vh中的较小值

vmax vw和vh中的较大值

 

本文链接:http://www.yanjun202.com/post/67.html 

分享到:
标签:JavaScript
可以去百度分享获取分享代码输入这里。
发表评论
搜索
关注我们

扫一扫关注我们,了解最新精彩内容