响应式布局

响应式布局:网站能够兼容多个终端——而不是为每个终端做一个特定的版本。   

   优点: 
  1. 面对不同分辨率设备灵活性强
  2.  能够快捷解决多设备显示适应问题 

   缺点:

  1. 兼容各种设备工作量大,效率低下
  2. 代码累赘,会出现隐藏无用的元素,加载时间加长
  3. 多方面因素影响而达不到最佳效果,一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

说到响应式设计,离不开媒体查询media

CSS3的新增内容Media Query(媒介查询):通过不同的媒介类型和条件定义样式表规则

 参数:

  1. 设备宽和高device-width,device-height显示屏幕/触觉设备。
  2. 渲染窗口的宽和高width,height显示屏幕/触觉设备。
  3. 设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。
  4.  
    画面比例aspect-ratio点阵打印机等。
  5.  
    设备比例device-aspect-ratio-点阵打印机等。
  6.  
    对象颜色或颜色列表color,color-index显示屏幕。
  7.  
    设备的分辨率resolution。

用法

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}

条件必须用括号()包起来,否则无效

一、link中使用@media: 

<link rel=“stylesheet” type=“text/css” media=“only screen and (max-width: 480px),only screen and (max-device-width: 480px)” href=“link.css”/>
<!--only可省略 max-width:渲染界面最大宽度 max-device-width:设备最大宽度。 -->

 

二、样式表中内嵌@media:

@media (min-device-width:1024px) and (max-width:989px),
screen and (max-device-width:480px),
(max-device-width:480px) and (orientation:landscape),
(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {
/*规则 :
  字符间以空格相连,选取条件包含在小括号内
  only(限定某种设备,可省略)
  and(逻辑与)
  not(排除某种设备)为逻辑关键字
  多种设备用逗号分隔

 */

   font-size:1rem;
}
/*电脑显示器分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。 */
 

 

可媒体类型参数:

   

类型

可选值

all 所有设备
print 文档打印或打印预览模式
screen 用于电脑屏幕,平板电脑,智能手机等。
speech 应用于屏幕阅读器等发声设备


 逻辑关键字:

参数

说明

only 限定某种类型
and 逻辑与,连接设备与选择条件
not 排除某种设备
* 设备列表


媒体功能:

参数描述
aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
color 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。
device-height 定义输出设备的屏幕可见高度。
device-width 定义输出设备的屏幕可见宽度。
grid 用来查询输出设备是否使用栅格或点阵。
height 定义输出设备中的页面可见区域高度。
max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-color 定义输出设备每一组彩色原件的最大个数。
max-color-index 定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height 定义输出设备的屏幕可见的最大高度。
max-device-width 定义输出设备的屏幕最大可见宽度。
max-height 定义输出设备中的页面最大可见区域高度。
max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution 定义设备的最大分辨率。
max-width 定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color 定义输出设备每一组彩色原件的最小个数。
min-color-index 定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width 定义输出设备的屏幕最小可见宽度。
min-device-height 定义输出设备的屏幕的最小可见高度。
min-height 定义输出设备中的页面最小可见区域高度。
min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution 定义设备的最小分辨率。
min-width 定义输出设备中的页面最小可见区域宽度。
monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
scan 定义电视类设备的扫描工序。
width 定义输出设备中的页面可见区域宽度。

 

通过Media Queries实现响应式布局设计

头部<head></head>之间加上下面这句∶
<!--移动设备上设置原始大小显示和是否缩放的声明。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

参数设置∶
  1. width – viewport的宽度
  2. height – viewport的高度
  3. initial-scale – 初始的缩放比例
  4. minimum-scale – 允许用户缩放到的最小比例
  5. maximum-scale – 允许用户缩放到的最大比例
  6. user-scalable – 用户是否可以手动缩放
 
当浏览器的可视区域小于768px 
/* 禁用iPhone中Safari的字号自动调整 */
html {
-webkit-text-size-adjust: none;
}

@media screen and ( max-width: 768px ) {
div {
    width:8.33%;
    }
}    

 

 
当浏览器的可视区域大于等于768px
@media screen and ( min-width: 768px ) {
div {
    width:8.33%;
    }
}  

 

 

 

posted @ 2018-12-10 14:31  G_Owen  阅读(158)  评论(0编辑  收藏  举报