在做手机网站的时候,我经常用百分比布局,但是经常在不同的手机显示的不同 比如说,一样的东西,在iphone4(s).5(s).6.plus中都会有不同显示 有时候也想有为了某个手机单独的做一些效果,来满足不同客户的要求 这时候,最方便的,我觉得应该是css3的 media query 而不是用javascript来判断 吼吼...真是方便极了!! 下面的,是我汇总的一些常用 media  query 代码,希望有帮助~  上干货!! @media (device-height:480px) an

viewport: 你可以定义viewport的宽度.如果你不使用width=device-width,在移动端上你的页面延伸会超过视窗布局的宽度(width=980px),如果你使用了width=device-width,你的页面将会显示为合适的移动端宽度(width=320px),我们可以使用meta标记: <meta name="viewport" content="width=device-width"> viewport - target-de

虽然说响应式设计的理想状态是,需对pc/移动各种终端进行响应:但是现实是高分辨率的pc端与手机终端屏幕相差太大,像电商这样有大量图片和文字信息的同时排版要求精准的页面,设计一个同时适应高分辨率pc又适合小尺寸的手机终端是挑战 :同时高分辨率下pc页面信息量巨大,对于手机端用户是否需要,也许会造成带宽浪费;再者手机终端和pc终端的用户操作习惯也相差甚大,这种多图多信息量要求精准的页面,设计出来恐怕会是2个完全不同的版本,也许各自维护更方便.由于业务形态原因,随着用户分辨率的提高,1024x768已

media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一.随着移动互联网的发展,media query开始得到大家的重视. media type 让我们先了解一下media type,其实这个大家会比较熟悉一点,我们通常会用到的media type会是all 和screen,然后是print,一些网站会专门通

由于需要,我们可能会在js中用到一些media query,从而针对不同的分辨率做一些操作. //全兼容的 事件绑定 and 阻止默认事件 var EventUtil = { //Notice: type is not include 'on', for example: click mouseover mouseout and so on addHandler: function(element, type, handler){ if (element.addEventListener){ e

参考博客:http://www.qianduan.net/media-type-and-media-query.html media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面. media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一. 随着移动互联网的发展,media query开始得到大家的重视. media type 让我们先了解一下media type,

现在的屏幕分辨率.小到320px(iPhone),大到2560px或甚至更高(大显示屏).范围内变化很大.除了使用传统的台式机.用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面. 这样的情况下,固定宽度的设计方案将会显得越发不合理.页面须要有更好的适应性,其布局结构要做到依据不同的设备及屏幕分辨率进行响应调整.接下来,我们将了解一下如何通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案 范例效果预览 首先,我们来看

media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一.随着移动互联网的发展,media query开始得到大家的重视. media type 让我们先了解一下media type,其实这个大家会比较熟悉一点,我们通常会用到的media type会是all 和screen,然后是print,一些网站会专门通

随着上网方式的多样化,用户选择上网的工具不再仅是PC,而可以是手机,或者平板电脑.随之而来的问题是如何让网页适应不同分辨率,这给前端工程师们带来了新的挑战,其中重要的一点是如何让图片能在不同的分辨率下都能给用户带来良好的用户体验? 方法概述 CSS3中的media query属性让我们可以根据浏览器的高宽,设备的像素比等来使用不同的CSS.当然它还一些别的用法,具体请参考这里. device-pixel-ratio是media query一查询条件,用于获得设备的像素比.一般来说iPhone4/

viewport,视口,就是对用户的可见部分, 大小因设备而不同.H5引入. * 没有它: 整体缩放 ( 老网页是固定的大小,浏览器在手机上只是简单地缩放整个页面,所以用户体验很差) * 有了它: 浏览器会重新排版.而且, 屏幕大小就是Chrome仿真器提示的size. 所以, mobile页面必须要它 用户习惯: * 用户都习惯上下滚动网站,而不是横向滚动,因此,如果用户必须横向滚动或缩放页面才能阅读,那么这将给用户带来糟糕的体验. Best Practice: * 自适应设计的主要概念基础是

mixins允许文档作者定义的属性对时可以在其他规则集中重用的模式. Media Queries直译就是“媒体查询”.media就是来指定特定的媒体类型,如屏幕(screen),或者“TV”等,其中“all”表示的是支持所有媒体介质, and 被称为关键字,与其相似的还有not,only. (max-width:640px) 就是媒体特性,通俗点就是媒体条件. media query 写入方法: @media (min-width:640px){ 选择器{ 属性:属性值 }} 那么是如何利用mi

Media Queries详解 Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: 1 <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> 2 <link href="css/style.css" rel="style

有段时间 扑了一个多月的在一个wifi的前端项目上 快做完时 各种小问题一堆一堆的修复 处理了一些很零散的问题 因为页面有一个所有页面都有一个背景色 有的页面有背景图 主要重点是移动前端的方向 因为现在设备会有各种屏幕比例(16:9) 分辨率(1024px_768px) 和像素比(devicePixelRatio) 对于页面适配起来 其实有很多值得思考的对方 页面宽度上的处理很方便 可以用百分比的html body样式 或者 我使用了bootstrap 用它非常优秀的栅格化 和断点 页面高度上 

1.Media Query(媒介查询) 通过不同的媒介类型和条件定义样式表规则.媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件.媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”.如:width会有min-width和max-width媒介查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中.通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛. 用法 @med

在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 media query 技术实现了栅格布局 ,但要兼容 IE8 的话,( IE6/7 没有中国占比那么高,所以不用兼容)需要引入 Respond.js 的方案. 该方案的原理分以下 4 步: 1.在样式 link 之后,载入 respond.js ,该脚本会获取在他之前出现的 link 节点到一个数组 2

iPhone5  iPhone6  iPhone6Plus iPad设备 media query(媒体查询)代码. iPhone < 5: @media screen and (device-aspect-ratio: 2/3) {} iPhone 5: @media screen and (device-aspect-ratio: 40/71) {} iPhone 6: @media screen and (device-aspect-ratio: 667/375) {} iPhone 6Pl

讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通 过CSS3 Media Query实现响应布局). 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端—

原文转自:http://blog.csdn.net/renfufei/article/details/19981133 http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html  http://www.blueidea.com/tech/web/2010/7912_3.asp http://www.moke8.com/article-5657-1.html 一.基本定义 1.CSS中的Media Query(媒介查询)是什么

media type media type是CSS2的重要属性,通过它,可以针对不同的设备指定不同的样式.   media type种类:   用法: <link href="style.css" media="screen print" ... @media screen{ selector{rules} } 例子: <style type="text/css"> @media screen{ body{ background

原文链接:http://www.moke8.com/article-5657-1.html 讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通 过CSS3 Media Query实现响应布局). 一.什么是响应式布局? 响应式布局是Ethan