移动web之响应式布局
1.响应式布局的概念
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念。简而言之。就是一个站点可以兼容多个终端——而不是为每一个终端做一个特定的版本号。
这个概念是为解决移动互联网浏览而诞生的。
响应式布局能够为不同终端的用户提供更加舒适的界面和更好的用户体验。并且随着眼下大屏幕移动设备的普及。用大势所趋来形容也不为过。
2.Media Rule
1)定义和用途
Media Rule是用来定义不同的媒体类型/不同设备的样式规则。
在css2中它被称为Media types,在css3中被称为Media Querys.
用途:
·浏览器的高度和宽度
·设备的高度和宽度
·设备的方向(横向/纵向)
·dpi
·and more
2)css语法
在样式表中嵌入@media
@media not|only mediatype and (media feature) {
CSS-Code;
}
/* 当浏览器的可视区域小于980px */
@media [only] screen and (max-width: 980px) {
#wrap {width: 90%; margin:0 auto;}
#content {width: 60%;padding: 5%;}
#sidebar {width: 30%;}
#footer {padding: 8% 5%;margin-bottom: 10px;}
}
/* 当浏览器的可视区域小于650px */
@media screen and (max-width: 650px) {
#header {height: auto;}
#searchform {position: absolute;top: 5px;right: 0;}
#content {width: auto; float: none; margin: 20px 0;}
#sidebar {width: 100%; float: none; margin: 0;}
}
在link中使用@media
<link rel="stylesheet" media=" mediatype and|not|only ( media feature )" href=" mystylesheet.css ">
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />
3)viewport
须要在页面的head中加上viewport,这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
<meta name="viewport" content="width=device-width; initial-scale=1.0;user-scalable=yes">
demo:
測试站点:http://responsivator.queenslandwebplan.com/
demo:http://2012.dconstruct.org/
移动web之响应式布局的更多相关文章
- web前端响应式布局,自适应全部分辨率
写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...
- WEB前端响应式布局之BootStarp使用
1.Bootstrap简介:1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的 ...
- 移动Web之响应式布局的探讨
响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...
- web前端----响应式布局
响应式开发 为什么要进行响应式开发? 随着移动设备的流行,网页设计必须要考虑到移动端的设计.同一个网站为了兼容PC端和移动端显示,就需要进行响应式开发. 什么是响应式? 利用媒体查询,让同一个网站兼容 ...
- Responsive Web CSS – 在线响应式布局创建器
如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...
- 从零开始学 Web 之 移动Web(六)响应式布局
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- “教你如何玩转Web响应式布局” 的更多相关文章
“教你如何玩转Web响应式布局” 的更多相关文章 网址:http://www.360doc.com/relevant/641896074_more.shtml
- 【css】25个漂亮的响应式布局的web设计【转】
响应的web设计的做法是提高用户的浏览质量,并在不同设备上能够完美的浏览使用,就像大前端推出的D7主题.看看下面美丽的响应的网站布局,通过本文你会在以后的设计中找到响应的web设计的灵感. 1.Mar ...
- 移动Web - 响应式布局开篇
用到的工具: FireFox浏览器 Sublime Text 2 响应式布局定义: 2010年,Ethan Marcotte提出,可查看原文: 通俗地讲就是:百份比布局,根据不同设备显示不同布局: 这 ...
随机推荐
- Share single RDM between multiple VM's in ESX
1.Create a VM01 on esx01,Create a VM02 on esx02 2.Create the RDM on your VM01 (using the virtual, no ...
- shell-总结【摘录】
阅读目录 1. Shell简介 2. 几种常见的Shell 3. 编译型语言和解释型语言的区别 4. 什么时候使用Shell? 5. 第一个Shell脚本 6. Shell变量 7.Shell特殊变量 ...
- 创建型设计模式之单例模式(Singleton)
结构 意图 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 适用性 当类只能有一个实例而且客户可以从一个众所周知的访问点访问它时. 当这个唯一实例应该是通过子类化可扩展的,并且客户应该无需更 ...
- Broadcom GNSS xxx Geolocaltion Sensor与Windows导航程序的兼容性(转)
Broadcom是Windows 8(3G)平板普遍采用的一款GPS传感器, 其windows驱动程序可以提供GNSS接口.GNSS接口提供的数据,说实话确实比普通手机的数据好.在开机.室外.无AGP ...
- 【转】Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04
原文链接:http://dblab.xmu.edu.cn/blog/install-hadoop/ 当开始着手实践 Hadoop 时,安装 Hadoop 往往会成为新手的一道门槛.尽管安装其实很简单, ...
- 使用timeit模块 测试两种方式生成列表的所用的时间
from timeit import Timer def test(): li=[] for i in range(10000): li.append(i) def test2(): li=[i fo ...
- 通过GitHub部署项目到Nginx服务器
1.更新源: 2.安装nginx 3.安装成功 4.DNS域名解析 5.访问域名就会找到相应IP地址的主机,一个IP可对应多个域名 6.提交到gitHub 复制这两行 填上邮箱和密码 7.提交成功 8 ...
- AC日记——Sliding Window poj 2823
2823 思路: 单调队列: 以前遇到都是用线段树水过: 现在为了优化dp不得不学习单调队列了: 代码: #include <cstdio> #include <cstring> ...
- MSSQL—列记录合并成一行
在项目开发中,有时会碰到将列记录合并为一行的情况,例如根据地区将人员姓名合并,或根据拼音首字母合并城市等,下面就以根据地区将人员姓名合并为例,详细讲一下合并的方法. 首先,先建一个表,并添加一些数据, ...
- Future使用场景与分析
前面分享了CountDownLatch的用法,但是由于分享过程中,发现有些朋友,问我Future与CountDownLatch的有什么区别? 答案:只是concurrent包下的并发帮助工具类,两者并 ...