前端页面布局之【响应式布局】-LMLPHP

🌟前言

现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。所谓的响应式布局,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。也就说一个页面可以在多个终端呈现出你想要的效果,能够兼容各个终端。

🌟优点

  • 面对不同分辨率设备灵活性强
  • 能够快捷解决多设备显示适应问题
  • 根据不同的显示器调整设计最适合用户浏览习惯的页面

🌟缺点

  • 兼容各种设备工作量大,效率低下
  • 代码累赘,会出现隐藏无用的元素,加载时间加长
  • 其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果
  • 因为要适应不同的设备,页面的结构可能会有所不同,会导致页面的辨识度不强

🌟@media兼容性

前端页面布局之【响应式布局】-LMLPHP

Respond.js可帮助IE6-8兼容 "min/max-width" 媒体查询条件: Respond.js

🌟利用CSS3-Media Query实现响应式布局

  • media query:
  • 语法结构及用法:
  • 在link中使用@media
    • screen:指的是一种媒体类型;
    • and:被称为关键词,与其相似的还有not,only。可能的操作符
    • max-width:600px这个就是属性值,媒体特性,也就是就是媒体条件。
<link rel="stylesheet" type="text/css" media="screen and (max-width:     600px)"href="link.css"/>
  • 在样式表中内嵌 @media
@media screen and (max-width: 600px) {
选择器 {
      属性:属性值;
      }
}

🌟常见的媒体类型

🌟常见的操作符

🌟属性值

🌟设备检测

  • Phone
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone.css" />
  • iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />
  • android
/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

🌟响应式阈值选取

响应式的阈值即不同设备宽度的临界值,该值由当前市面上设备分辨率比例得出,详见Statcounter

🌟简单案例查看

案例一:StatCounter Global Stats - Screen Resolution Market Share

案例二:苹果官方

案例三:Bootstrap

🌟写在最后

更多前端知识请大家持续关注,尽请期待。各位小伙伴让我们 let’s be prepared at all times!

10-15 02:25