html5晋级之路-响应式布局基本实现

1.css中的Media Query(媒介查询):

设备宽高: device-width,device-height

渲染窗口的宽和高:width,height

设备手持方向:orientation

设备的分辨率:resolution

2.使用方法:

外联

内嵌样式

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>js事件测试</title>
<link rel="stylesheet" href="js.css" type="text/css" media="only screen and (max-width:640px)">
</head>
<style>
@media screen and (min-width:640px){
body{
background-color:#0FC;
}
}
</style>
<body>
</body>
</html>

如上的两种方法 only screen and(max-width:640)这个最大宽度为640的时候执行,也就是说小于640

@media screen and (min-width:640px)同理大于640;

时间: 2024-11-05 22:07:54

html5晋级之路-响应式布局基本实现的相关文章

html5+css3+jquery完成响应式布局

响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们去hack,现在是终端问题,让我展现出不同的设备不同的样式,折腾来折腾去,终于我们走进了热火朝天的响应式布局,自适应只能算是响应式布局的一个子集吧,对于流体个栅格后面会再次提到,有兴趣可以关注. 首先讲讲实现原理吧,css3的媒体查询功能的确帮了我们很大一个忙,@media query,它的出现也带

响应式布局的理解与认知

随着互联网的快速发展,HTML5迅速崛起,响应式布局也慢慢的被广泛的运用起来,身为Web前端人员,我觉得必须要掌握“响应式布局”. 响应式布局,简单点说就是做一个网站而能多终端多平台运行的由一个网站转化为多个网站,为我们大大节省了资源. 那么响应式布局有什么优缺点呢? 优点:1.响应式布局面对不同的分辨率设备灵活性强. 2.能够快捷解决多设备显示适应问题. 缺点: 1.兼容各种设备工作量大,效率低下.   2.代码累赘,会出现隐藏无用的元素,加载时间加长.   3.其实这是一种折衷性质的设计解决

对响应式布局的理解和认知

随着互联网的快速发展,HTML5迅速崛起,响应式布局也慢慢的被广泛的运用起来,身为之后的Web前端人员,我觉得应该要掌握"响应式布局". 响应式布局,简单点说就是做一个网站而能多终端多平台运行的由一个网站转化为多个网站,为我们大大节省了资源. 那么响应式布局有什么优缺点呢?优点: 1.响应式布局面对不同的分辨率设备灵活性强. 2.能够快捷解决多设备显示适应问题.缺点: 1.兼容各种设备工作量大,效率低下.  2.代码累赘,会出现隐藏无用的元素,加载时间加长.  3.其实这是一种折衷性质

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

响应式布局 响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的

SharePoint 2013的HTML5特性之响应式布局

今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML5的响应式的布局,就简单的尝试了一下,感觉还不错.当页面在不同的浏览器可视区域上浏览的时候,会通过不一样的css文件来进行展示,使用户在浏览页面中能尽可能的达到最佳体验. 下面简单看看效果,在1380px浏览器可视区域中浏览,下面的css生效: (浏览器的可视区域为1380) 在920px浏览器可视区域中浏览

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

html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 一个普通的自适应显示的三栏网页,当你用不同的终端来查

浅谈html5 响应式布局

一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联网浏览而诞生的.响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过. 随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 二.响应式布局有哪些优点和缺点?   优点: 面对不同分辨率设备灵活性强

html5 + css3 + jQuery + 响应式布局设计

1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN"><head><meta charset="utf-8" /><title>html5 - 新增属性与技术总结 - by sole</title><meta name="keywords" content="html

HTML5 -- 使用css3实现简单的响应式布局

本文简单的讲解了如何使用css3实现简单的响应式布局: html5文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name ="viewport" content="width = device-width,initial-scale=1"> <title>i