一、流式布局

  不再使用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. UIView的使用

    UIView是iOS中所有视图的基类,表示屏幕上的一块矩形区域. UIView的基本属性包括: 1.frame,控制视图的显示位置和大小 2.backgroundColor,控制视图的背景颜色 3.a ...

  2. Apache Shiro 使用手册(三)Shiro 授权

    授权即访问控制,它将判断用户在应用程序中对资源是否拥有相应的访问权限. 如,判断一个用户有查看页面的权限,编辑数据的权限,拥有某一按钮的权限,以及是否拥有打印的权限等等. 一.授权的三要素 授权有着三 ...

  3. python---list列表

    Python 列表(List) 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型 ...

  4. [经验交流] Apache Mesos Docker集群初探

    前言 因工作需要,我对基于Apache Mesos 的 Docker 集群作了一点研究,并搭建了一套环境,以下是资料分享. 1. Apache Mesos概述 Apache Mesos是一款开源群集管 ...

  5. 使用它tshark分析pcap的例子以及scapy下载地址

    转一篇cisco工作人员使用tshark分析pcap的文章,以及scapy的下载地址 http://blogs.cisco.com/security/finding-a-needle-in-a-pca ...

  6. common.support.percent.PercentFrameLayout.onLayout(PercentFrameLayout.java:151)

    08-29 20:01:47.402 18908-19364/com.tongyan.subway.inspect E/CrashHandler: java.lang.NullPointerExcep ...

  7. .NET 环境中使用RabbitMQ(转)

    在企业应用系统领域,会面对不同系统之间的通信.集成与整合,尤其当面临异构系统时,这种分布式的调用与通信变得越发重要.其次,系统中一般会有很多对实时性要求不高的但是执行起来比较较耗时的地方,比如发送短信 ...

  8. java事件监听

    获取事件监听需要获取实现ActionListener接口的方法, public class SimpleEvent extends JFrame{    private JButton jb=new ...

  9. cocos2d-x + Lua接入iOS原生SDK的实现方案[转]

    相信很多朋友在使用cocos2d-x+lua开发游戏时都遇到过接入iOS原生SDK的问题,比如常见的接应用内支付SDK,广告SDK或是一些社交平台SDK等等,我也没少接过这类SDK.这篇文章主要是对我 ...

  10. 四、maya python plugin

    只是作简单的了解. 1区别 (1)Python scripts:可以在Maya的script editor 执行.用于扩展maya.cmd模块. The import statement below ...