【css3在线手册】http://css.doyoe.com/

http://blog.csdn.net/duchao123duchao/article/details/52638506  【根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS】

http://www.cnblogs.com/tdalcn/p/3512140.html  【css方法详细介绍，@media】

　　@media (only) screen and () and () and () not ()....

两种方式【注：media是根据浏览器的宽度像素(即 body对象的宽度 document.body.clientWidth )判定的，而不是根据手机或者电脑屏幕的宽度像素（window.screen.width）。】

a　　<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
意思是当屏幕的宽度大于600小于800时，应用styleB.css
b　　@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries【最详尽的，网站很好】

@media匹配手机横屏 竖屏

@media是css3中新定义的，功能非常强大，顾名思义PC是无法匹配横竖屏的，所以orientation只对移动设备起效。

1.头部声明

复制代码

代码如下:

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

加到

复制代码

代码如下:

<head></head>

2. media匹配屏幕是横屏还是竖屏

复制代码

代码如下:

@media all and (orientation : landscape) { </p> <p>/*　　这是匹配横屏的状态，横屏时的css代码　　*/
body { 
 
} 
} 
@media all and (orientation : portrait){ </p> <p>/*　　这是匹配竖屏的状态，竖屏时的css代码　　*/
body { 
background-color: #00ff00; 
} 
} 

3. 应用的地方

（1）手机WEB页面元素内容一般都是通过百分比定义的，以便能够在不同分辨率设备下都能正常显示，虽然这样，但是移动设备的屏幕分辨率宽度和高度相差还是很大，同样的页面在屏幕翻转过来时可能百分比定义的元素宽度会变得非常大，这样就会失去页面的美观性，这样，如果用orientation匹配屏幕的翻转状态，就可以写不同的css加以控制页面样式。

（2）对于有背景图的移动WEB页面，可以根据orientation匹配屏幕屏幕状态，设置不同的background。

（3）稍微有技术的一点：某些有绝对定位元素的WEB页面，将某元素定位到页面底部，当屏幕是竖屏状态时，可能因为页面总长度小于屏幕高度(但是大于屏幕宽度)，这时将绝对定位元素定位到底部是正确的，但是当屏幕翻转成为横屏时，此时因为页面内容高度大于屏幕高度(就是未翻转时屏幕宽度)，绝对定位元素会覆盖在页面内容之上，导致页面出现问题，这时可用orientation匹配屏幕状态，调整css代码。

关于匹配屏幕横竖屏状态还可通过JS判断，js中onorientationchange是window的一个事件，可以通过监听事件匹配屏幕横竖屏。

响应式布局(css,js,php等方法)，根据媒体类型设计不同的样式，css在线手册的更多相关文章

  1. CSS响应式布局学习笔记（多种方法解决响应式问题）

    在做web开发的工作中,会遇到需要我给页面根据设计的要求,进行响应式布局,这里跟大家分享下我对于响应式布局的解决方法: 我主要利用的是CSS3 媒体查询,即media queries,可以针对不同的媒 ...

  2. 使用rem来做响应式布局（js动态加载）

    <script> ;(function (doc,win) { var htmlEle=doc.documentElement; var reload="orientationc ...

  3. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  4. html自己写响应式布局（说起来很高大上的样子，但是其实很简单）

    第一步,打开电脑中安装的Sublime Text3,新建demo文件夹用来存放文件,在里面新建一个HTML文件,通过Tab快捷键迅速创建一个HTML模板,并命名标题. 第二步,在Body标签里添加三个 ...

  5. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  6. css实现响应式布局的相关内容

    所以我就在做自适应的时候查了一些资料 首先我发现一个问题:有响应式布局和自适应布局两种布局效果 简单来说,响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用 ...

  7. 【css】响应式布局入门【转】

    最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...

  8. CSS响应式布局到底是什么？

    响应式布局是最近几年在前端开发中非常火热的词,它是相对于固定像素大小的网页而言的,那么CSS响应式布局到底是什么?顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献 ...

  9. css响应式布局RWD

    响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max- ...

随机推荐

  1. 如何成功再次安装MYSQL

    以前安过,后来再安装就是停在启动项就是过不去,无响应 弄了两天,期待奇迹,网上各种教程试了个遍就是不行,大体就是删除INI,清理注册表,以下是新的发现:(转载) 如果你的电脑里装过MySQL,想再重新 ...

  2. 【linux】常见问题&常用命令笔记

    1.重启以及关机命令: Linux centos重启命令: (1)reboot   普通重启 (2)shutdown -r now 立刻重启(root用户使用) (3)shutdown -r 10 过 ...

  3. linux命令学习之：vim

    1. 关于Vim vim是我最喜欢的编辑器,也是linux下第二强大的编辑器. 虽然emacs是公认的世界第一,我认为使用emacs并没有使用vi进行编辑来得高效. 如果是初学vi,运行一下vimtu ...

  4. Activity 的启动过程深入学习

    手机应用也是一个app,每一个应用的icon都罗列在Launcher上,点击icon触发onItemClick事件. 我们要启动「淘宝」这个App,首先我们要在清单文件定义默认启动的Activity信 ...

  5. rsync同步工具的配置与使用

    一.什么是rsync?rsync是一款开源的,快速的,多功能的,可实现全量及增量的本地或远程数据同步备份的优秀工具. rsync官网 http://rsync.samba.org/ 二.rsync的工 ...

  6. go语言中的反射reflect

    package main; import ( "fmt" "reflect" ) //反射refection //反射使用TypeOf和ValueOf函数从接口 ...

  7. oracle数据库冷恢复

    场       景:客户的服务器是在虚拟机上,结果虚拟机的服务器的硬盘坏掉了.硬盘换掉后,系统成功恢复出来,但是登录虚拟机后,数据库无法启动. 解决方案:通过冷恢复将数据库还原.在自己的电脑上搭建一个 ...

  8. java基础之—类加载器

    要了解类加载器先要了解类的加载 一.类的加载(类的加载概述) 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. 1.加载 就是指将clas ...

  9. Vsphere初试——使用Vsphere client

    好不容易安装好ESXi之后,就要安装一个Vsphere Client,为什么要安装这个东东.使用过vmware workstation的人都知道,安装完就可以添加虚拟机,但是ESXi要通过Vspher ...

  10. ArrayList、Vector、LinkedList的特点和区别

    ArrayList.Vector.LinkedList类均在java.util包中,均为可伸缩数组. 1)ArrayList和Vector都是基于存储元素的Object[] array来实现的,它们会 ...