一、流式布局

  不再使用px作为盒模型布局,而是采用百分比布局宽高,定位等。

  公式:目标元素宽度/上下文元素宽度=百分比宽度

     目标定位/上下文元素宽度或高度=定位距离(保留5位小数点)

  用em/rem来替换px

    1、em的值并不是固定的;

    2、em会继承父级元素的字体大小。

    3、rem为css新增属性,全称root em(root指html元素)

  弹性图片大小

    图片设置width:100%,或者background-size:100% 100%。

    图片设置阈值:max-width

二、响应式布局

  根据不同屏幕分辨率使用不同的样式和布局结构

  媒体查询

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

    <link rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" href="link.css">

CSS3--响应式布局的更多相关文章

  1. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  2. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  3. css3响应式布局

    响应式布局 分栏布局,-webkit-column-width(定义每栏的宽度,会根据每栏宽度自动分成若干栏) <style> .wrap {width: 900px; border: 1 ...

  4. CSS3 响应式布局: @media (min/max-width:***) @font-face

    响应式布局 responsive design @media 属性 bootstrap  css 分析: @media (min-width:768px){ body{***} } use @medi ...

  5. css3 响应式布局 Media Query

    1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...

  6. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  7. css3响应式布局教程—css3响应式

    响应式布局 一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验. 媒体类型 在何种设备或者软件上将页面打开 123456789 all:所有媒体braille:盲文触觉设备embossed:盲 ...

  8. css3响应式布局设计——回顾

    响应式设计是在不同设备下分辨率不同显示的样式就不同. media 属性用于为不同的媒体类型规定不同的样式.根绝浏览器的宽度和高度重新渲染页面. 语法: @media mediatype and | n ...

  9. CSS3响应式布局之弹性盒子

    CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...

  10. html5 响应式布局(媒体查询)

    响应式布局        响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.        响应式布局可以为不同终端的用户 ...

随机推荐

  1. 给app增加itunes文件共享支持的功能

    从网上查找的一些说法来看,是给app的plist配置文件中增加UIFileSharingEnabled,我后面查苹果官网的plist键值说明文档,也是这样说. 但实际上直接通过XCode打开plist ...

  2. PRD

  3. ubuntu 12.04 设置代理

    一. Ubuntu 12.04 apt-get 代理设置 由于公司通过代理上网,firefox的代理设置很容易就搞定了,但是通过apt-get安装软件还是不行,于是,查阅了很多资料,最多的方法就是网上 ...

  4. QueryRunner类

    该类简单化了SQL查询,它与ResultSetHandler组合在一起使用可以完成大部分的数据库操作,能够大大减少编码量. QueryRunner类提供了两个构造方法: 默认的构造方法 需要一个 ja ...

  5. Distributed Transaction Coordinator 无法启动

    有时候我们需要进行COM应用程序的权限设置,控制面板-->管理工具-->组件服务-->然后依此展开:组件服务-->计算机-->我的电脑-->DCOM 配置,接下来找 ...

  6. 使用opencv设置图像的格式以及帧率

    最近楼主正在写一个关于图像存储的程序,LZ有一颗求知心,想要了解保存的图像的格式以及获取摄像头帧率.晚些时候会写一篇关于opencv获取摄像头并且保存每帧图像信息方法. 1.修改图像的像素显示: 首先 ...

  7. bash检查文件格式

    情形描述:最近在做一个ETL的项目,用的是CLoverETL,需要在拿到文件后对文件格式进行检验,以决定是否继续. 主要功能是检查每个文件中有几个“|”符号,项目中约定以该符号来作为分隔,所以检查每个 ...

  8. C语言初始化——bss段初始化、跃入C、C与汇编

    1.bss段初始化 变量 存放位置 初始化的全局变量 数据段 局部变量 栈 malloc函数分配的 堆 未初始的全局变量 bss段 说明:全局变量在未赋初值时,会被保留到bss段. 测试: #incl ...

  9. js 用延时函数来实现像鼠标移入qq头像然后会出现新的模块

    就好像这功能. 代码如下 <style> #div1{ width:50px; height:50px; background:red; margin-bottom:10px; } #di ...

  10. python模块概况,json/pickle,time/datetime,logging

    参考: http://www.cnblogs.com/wupeiqi/articles/5501365.html http://www.cnblogs.com/alex3714/articles/51 ...