响应式布局

什么是响应式布局

响应式就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式

如何适配各种浏览器

从最简单的‘基本’做起,再逐步扩充,即渐进增强,这是比较简单的做法,而优雅降级则麻烦很多。
基本是相对的,首先要确定平台,如果有较多用户再用IE9,那么得考虑IE9的基础,它支持什么特性,
如果用户多是Android2,那么也要考虑类似的问题,不同平台的'基础'体验是相差很大的。

如果浏览器的开发成本超过了浏览器的用户创造的收益,那么就不为该浏览器开发特殊的版本

响应式的一些方法

  • 图片
   img{
     /*最大只可以自身那么大*/
     max-width: 100%;
   }

如果把图片设置成width:100%,那么图片宽度就是父级的宽度,如果父级宽度比图片本身宽,那么图片就会被拉伸

但单独设置max-width有些弊端,如果视口宽度过大,图片仍然会被拉伸,这时需要利用媒体查询

媒体查询

媒体查询在媒体满足某一特定的条件下,改变布局,值得注意的是媒体查询的断点应该跟流行的设备无关
断点,就是某个宽度的临界点,断点应由内容和设计本身决定

例子,尝试改变浏览器大小试试效果



    
        
        
        
    
    
        
    
    设备类型 
 
all 所有设备
screen 电脑显示器
print 打印用纸或打印预览视图
handheld 便携设备
tv 电视机类型的设备
speech 语音和音频合成器
braille 盲人用点字法触觉回馈设备
embossed 盲文打印机
projection 各种投影设备
tty 使用固定密度字母栅格的媒介,如电传打字机和终端

设备特性

  • width 视口宽度
  • height 视口高度
  • device-width 渲染表面的宽度,即设备屏幕的宽度
  • device-height 渲染表面的高度,即设备屏幕的高度
  • orientation 设备方向是水平还是垂直
  • aspect-ratio 视口的宽高比,16:4 -> aspect-ratio: 16/4
  • color 颜色组分的位深,min-color -> 设备至少支持16位深
  • color-index 设备颜色查找表的条目数,值必须是数值,且不能为负
  • monochrome 单色帧缓冲中表示每个像素的位数,值必须是整数,不能为负
  • resolution 屏幕或打印分辨率
  • scan 针对电视的逐行扫描和隔行扫描, progressive 逐行;interlace 隔行
  • grid 设备基于栅格还是位图

响应式小小小案例



    
        
        
        
    
    
        

响应式网页

主体内容

你可能感兴趣的:(响应式布局)