响应式布局(css,js,php等方法)，根据媒体类型设计不同的样式，css在线手册
【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）。】
.class {
background: #ccc;
}
}
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries【最详尽的，网站很好】
@media匹配手机横屏 竖屏
@media是css3中新定义的，功能非常强大，顾名思义PC是无法匹配横竖屏的，所以orientation只对移动设备起效。
1.头部声明
代码如下:
加到
代码如下:
2. media匹配屏幕是横屏还是竖屏
代码如下:
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在线手册的更多相关文章
- CSS响应式布局学习笔记（多种方法解决响应式问题）
在做web开发的工作中,会遇到需要我给页面根据设计的要求,进行响应式布局,这里跟大家分享下我对于响应式布局的解决方法: 我主要利用的是CSS3 媒体查询,即media queries,可以针对不同的媒 ...
- 使用rem来做响应式布局（js动态加载）
<script> ;(function (doc,win) { var htmlEle=doc.documentElement; var reload="orientationc ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- html自己写响应式布局（说起来很高大上的样子，但是其实很简单）
第一步,打开电脑中安装的Sublime Text3,新建demo文件夹用来存放文件,在里面新建一个HTML文件,通过Tab快捷键迅速创建一个HTML模板,并命名标题. 第二步,在Body标签里添加三个 ...
- 理解rem实现响应式布局原理及js动态计算rem
前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...
- css实现响应式布局的相关内容
所以我就在做自适应的时候查了一些资料 首先我发现一个问题:有响应式布局和自适应布局两种布局效果 简单来说,响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用 ...
- 【css】响应式布局入门【转】
最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...
- CSS响应式布局到底是什么？
响应式布局是最近几年在前端开发中非常火热的词,它是相对于固定像素大小的网页而言的,那么CSS响应式布局到底是什么?顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献 ...
- css响应式布局RWD
响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max- ...
随机推荐
- Cisco VSS
1.原理 VSS是将两台及以上的物理设备虚拟成逻辑上的一台,可类比堆叠.VSS在控制层面上两个交换机有主从之分,但在数据面上处理是双活的.无论是从网络控制层面和管理视图上在网络上都是一个单独的设备实体 ...
- sqlserver2017 +SSMS+ VS2017+SSDT 安装要点及相关组件下载地址
1.sqlserver2017安装PolyBase需要安装jdk7 ,注意必须是7 jdk10是不行的. 下载地址:http://dl-t1.wmzhe.com/30/30117/jdk_7u_1. ...
- GridView（网格视图）+MotionEvent（触控事件）实现可以拖动排序的网格图
1.一触碰,就回调onInterceptTouchEvent(MotionEvent ev)事件,每次的触碰都只回调一次,接着只要还没有放手,就一直回调onTouchEvent(MotionEvent ...
- Oracle_SQL(1) 基本查询
1.oracle的安装与卸载 2.PL/SQL Developer的安装 3.登陆PL/SQL Developer 4.SCOTT用户下表的介绍 5.基本查询语句 查询雇员的所有信息: select ...
- docker从私有镜像库pull/push镜像问题：Error response from daemon: Get https://xxxx.com/: x509: certificate signed by unknown authority
docker从私有镜像库pull/push镜像问题:Error response from daemon: Get https://harbor.op.xxxx.com/v2/: x509: cert ...
- 虚拟机vmware centos7 扩展磁盘空间
0.思路 创建一个新的逻辑分区,将新的逻辑分区格式化ext3(或其他类型)的文件系统,mount到磁盘空间不够的文件系统,就跟原来的分区/文件系统一样的使用 1.准备 1.1 注意使用VMware自带 ...
- 搭建http静态网页服务器出现“Forbidden You don't have permission to access / on this server”
部分参考链接: 2.4+ httpd最简单example.conf, 存放目录:/etc/httpd/conf.d/example.conf Alias /newstart-zte/ "/n ...
- CF Round #516 (Div. 2, by Moscow Team Olympiad)
前言:依旧菜,\(A\)了\(4\)题,不过这次上蓝了挺开心的. A. Make a triangle! Description 给出\(3\)根木棍,希望用它们拼成三角形,可以将其中的某些木棍增长, ...
- POJ3417 Network
一道LCA+树上差分 原题链接 显然每一条新增边都会导致环. 如果试着举些例子的话,很容易发现割掉非环上的边,则割掉其他任意一条新增边都可达成目标:若割掉的原有边是一个环上的边,那么只有割掉导致这个环 ...
- Scrapy框架学习笔记
1.Scrapy简介 Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,用途非常广泛. 框架的力量,用户只需要定制开发几个模块就可以轻松的实现一个爬虫,用来抓取网 ...