流式布局和响应式布局

Posted 2022-07-13 belongs-to-qinghua

流式布局（百分比布局）

• 在CSS2时代就有，主要指的是将页面中元素的宽度以百分比表示并进行排版，可以在不同分辨率下显示相同的版式

响应式布局

• 关键技术是CSS3中的媒体查询，可以在不同分辨率下对元素重新设置样式（不只是尺寸），在不同屏幕下可以显示不同版式

　　举例：

• 可以实现不同尺寸屏幕下对不同元素的显示与隐藏

@media screen and (min-width: 769px) and (max-width: 979px) 
  .w 
    width: 750px;
  
  .top_nav ul li:first-child 
    display: none;
  
  .nav ul li:last-child 
    display: none;
  
  .bottom_cards .cards .item 
    width: 49%;
  
  .bottom_cards .cards:after 
    display: none;
  

• 可以实现不同尺寸屏幕下的元素尺寸适配

/* 
设计图宽度为640px，
计算font-size的方法为： 要适配的屏幕尺寸/设计图尺寸*默认下的文字大小
即： 320/640*32 = 16（px）
*/
@media only screen and (width: 320px) 
  html 
    font-size: 16px;
  

/* 即： 360/640*32 = 18（px） */
@media only screen and (width: 360px) 
  html 
    font-size: 18px;
  

/* 即： 375/640*32 = 18.75（px） */
@media only screen and (width: 375px) 
  html 
    font-size: 18.75px;
  

/* 即： 414/640*32 = 20.7（px） */
@media only screen and (width: 414px) 
  html 
    font-size: 20.7px;