码迷,mamicode.com
首页 > 其他好文 > 详细

流式布局和响应式布局

时间:2019-08-14 16:41:19      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:技术   布局   car   显示与隐藏   dia   页面   isp   nav   strong   

流式布局(百分比布局)

  • 在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;
  }
}

  

流式布局和响应式布局

标签:技术   布局   car   显示与隐藏   dia   页面   isp   nav   strong   

原文地址:https://www.cnblogs.com/belongs-to-qinghua/p/11352688.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!