响应式WEB&媒体查询

为什么响应式设计需要媒体查询?

媒体查询 中可用于检测的媒体特性有 width、height 和 color(等)。使用媒体查询, 可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。

使用媒体查询步骤:

1、在head中引入下面这个meta标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width = device-width:宽度等于当前设备的宽度

initial-scale:初始的缩放比例(默认设置为1.0)

minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)

maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)

user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

2、在CSS中可以使用Media

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

表示为当屏幕宽的像素大于960px并且小于1200px的时候body的背景色为yellow。

3、media所有参数

width:浏览器可视宽度。

height:浏览器可视高度。

device-width:设备屏幕的宽度。

device-height:设备屏幕的高度。

orientation:检测设备目前处于横向还是纵向状态。

aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9)

device-aspect-ratio:检测设备的宽度和高度的比例。

color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色)

color-index:检查设备颜色索引表中的颜色,他的值不能是负数。

monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到)

resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。

grid:检测输出的设备是网格的还是位图设备。

4、注意事项

响应式设计需要使用百分比和em、rem,不用px。

em:参照的是上下文(父元素)的font-size

rem:参照的是body的font-size

百分比和max-width、min-width配合使用:

#wrapper{
  width:96%;
  max-width:1200px;
}

当某个元素宽度使用百分比,而又不想使其超过某像素值.

时间: 2024-11-03 22:35:32

响应式WEB&媒体查询的相关文章

响应式设计——媒体查询

一.响应式设计 响应式设计的概念是页面的设计应根据用户的行为(如调整浏览器窗口大小)和设备环境(如屏幕大小.屏幕定向)进行相应的调整.它可以由多方面组成,包括弹性网格和布局.弹性图片.媒体查询等. 二.媒体查询      2.1媒体查询的概念         在css2中允许使用media来对特定的媒体应用特定的样式,例如针对屏幕或者打印机.可以通过<link>标签的media属性为样式表指定特定的媒体. <link rel="stylesheet" type=&qu

响应式布局--媒体查询

手机浏览器会将一个标准网页缩小至与设备可视区域(标准技术术语叫做“视口”)恰好匹配.然后用户在自己感兴趣的内容区域上放大浏览 大多数情况下,根据视口大小为用户提供与之匹配的视觉效果还是优先选择 用厂商前缀时,遵循样式表的层叠特性,将无前缀的代码放在最后,这样如果该特性可用,则会覆盖之前的声明 使用CSS的@import指令在当前样式表中按条件引入其他样式表,eg:@import url("phone.css") screen and (max-width:360px);使用CSS的@i

响应式设计-媒体查询

媒体查询 媒体查询只支持IE9+.chrome.ff等浏览器,IE8以下的浏览器可以下载引用respond.js, 写法: <!--[if lt IE 9]> <script src="respond.js"></script><![endif]--> 媒体查询能检测哪些属性 :    1.width  视口宽度    2.height 视口高度    3.device-width 渲染表面的宽度(对我们来说就是设备屏幕的宽度)    4

响应式web设计与CSS3媒体查询

在之前一篇译文中,我们了解了响应式Web设计的概念.组成要素以及基本的实现思路.今天继续相关话题,我们将从前文介绍过的"弹性布局结构"这方面出发,通过一个具体的实例来深入学习. 如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况下,固定宽度的设计方案将会显得越发不合理.页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行

css014 响应式web设计

css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. 二.    为RWD构建网页 1.            手机浏览器中为了忽略手机浏览器屏幕变小字体也变小的行为,可在head中添加一行代码: <meta name="viewport" content="width=vedice-width"> 最好是添加

CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 3.在一个非浮动元素<div>中存在一个浮动元素,当浮动元素高于元素本身的时候,内容就会溢出<div>中,解决方案如下: A:在</div>介绍之前添加一个换行,并且添加一个类<br class=”clear”/>,之后创建一个样式br.class{clear

常用响应式 Web UI 框架

1. Bootstrap Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等.官方网站: http://twitter.github.com/bootstrap/github: https://github.com/twitter/bootstrap 2. Foundation Foundation 是一个易用.强大而且灵活的框架,用于构建基于任何设备上的 W

《响应式Web设计实践》学习笔记

原书: 响应式Web设计实践 第2章 流动布局 1. 布局选项 传统的固定布局中存在很多问题, 随着屏幕大小的越来越多元化, 固定布局已经不能适用了. 在流动布局中, 度量的单位不再是像素, 而是变成了百分比. 弹性布局与流动布局类似, 但是通常情况下, 弹性布局中会以em来作为单位. 带来一个好处是随着用户增大或减小字体, 适用弹性布局的元素的宽度也会等比例地变化. 但是其也可能出现水平滚动条 混合布局 媒体查询: 媒体查询允许根据设备的信息----诸如屏幕宽度, 方向或者分辨率等属性来使用不

响应式web-媒体查询

响应式web-媒体查询 媒体查询是一个将很多响应式概念和工具连接在一起的粘合剂.这些查询语句都是简单但是功能很强大的,它们允许我们检测设备属性,定义规则,并根据规则等的不同加载不同的 CSS 属性.例如,你可以为不同的设备优化导航菜单,将桌面浏览器上的完整水平菜单转换为经常在移动设备上遇到的 "汉堡包"(垂直或折叠)菜单结构 web响应式布局的核心有两个,媒体查询和视图.在这篇文章中,我们将会看到怎么运用媒体查询来创建响应式布局. 媒体查询是一个将很多响应式概念和工具连接在一起的粘合剂