CSS3--响应式布局
一、流式布局
不再使用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--响应式布局的更多相关文章
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- CSS3–2.css3 响应式布局
1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...
- css3响应式布局
响应式布局 分栏布局,-webkit-column-width(定义每栏的宽度,会根据每栏宽度自动分成若干栏) <style> .wrap {width: 900px; border: 1 ...
- CSS3 响应式布局: @media (min/max-width:***) @font-face
响应式布局 responsive design @media 属性 bootstrap css 分析: @media (min-width:768px){ body{***} } use @medi ...
- css3 响应式布局 Media Query
1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...
- CSS3–2.css3 响应式布局
1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...
- css3响应式布局教程—css3响应式
响应式布局 一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验. 媒体类型 在何种设备或者软件上将页面打开 123456789 all:所有媒体braille:盲文触觉设备embossed:盲 ...
- css3响应式布局设计——回顾
响应式设计是在不同设备下分辨率不同显示的样式就不同. media 属性用于为不同的媒体类型规定不同的样式.根绝浏览器的宽度和高度重新渲染页面. 语法: @media mediatype and | n ...
- CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...
- html5 响应式布局(媒体查询)
响应式布局 响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户 ...
随机推荐
- HackerRank "Prim's (MST) : Special Subtree"
An intuitive Prim algorithm impl. #include <vector> #include <iostream> #include <que ...
- [Linux] Linux下谁在消耗我们的cache
一.缘由: 曾经看到MySQL服务器上Cache占用特别大,其实大家都知道这是合理的,这些都是可用内存: 那么问题来了,是谁在占用这些Cache呢?如果去掉不合理的Cache占用,系统内存会更充分的得 ...
- IOS跳转设置页面及其他各种跳转页面设置
转载来源 CocoaChina 跳到更多设置界面 除了跳到WiFi设置界面,能不能跳到其他的设置界面呢?比如:定位服务.FaceTime.音乐等等.都是可以的,一起来看看如何实现的! 定位服务 定位服 ...
- silverlight简单数据绑定2
<Grid x:Name="LayoutRoot" Background="white" Loaded="LayoutRoot_Loaded&q ...
- (LinkedList)2. Add Two Numbers
You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...
- mysql数据库连接方式(.net)
1.通过ado.net连接(数据库连接串中库名称为中文无法使用) 需要添加MySql.Data.dll(可通过安装mysql-connector-net-6.8.3.mis获得) 引用MySql.Da ...
- 【转】Samba配置文件详解
一. 客户命令: 1. smbclient smbclient 命令用来存取远程 samba 服务器上的资源,它的界面到目前为止还是文本方式的,命令形式和 ftp 类似. smbclient 命令的语 ...
- hibernate的延迟加载及其与session关闭的矛盾
延迟加载就是并不是在读取的时候就把数据加载进来,而是等到使用时再加载. 那么Hibernate是怎么知道用户在什么时候使用数据了呢?又是如何加载数据呢? 其实很简单,它使用了代理机制.返回给用户的并不 ...
- Windows、VS 与 .net
原文地址:https://msdn.microsoft.com/en-us/library/bb822049(v=vs.110).aspx .NET Framework version CLR ver ...
- 同一台服务器启动多个driver负载机实例
COSBench添加driver负载机 说明:Driver是COSBench测试工具中对负载机的一种标记,相当于loadrunner中的负载发生器. 在进行测试时,不管出于什么原因,我有时候就想单台服 ...