当需要为不同屏幕大小添加不同脚本的时候,首先需要检测对应的media query 是否起效 也就是CSS( @screen only and (min-width: 40em) {})和javascript( if (window.matchMedia( "screen and (min-width:40em)" )) { })上各查询了一次 但无论怎样都依赖于CSS media query   定义分界点:网页或者网页应用的某些方面需要发生改变的特定情况就是分界点所在   css m…

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

虽然说响应式设计的理想状态是,需对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,一些网站会专门通…

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

Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使用媒体查询会造成很多资源的浪费——浏览器请求到很多用不到的图片等资源,然后写了一些测试用例测试一些可用方法.然后Tim Kadlec写了篇<Media Query & Asset Downloading Results>,用js自动化的测试了Jason Grigsby的用例. 本文主要整理…

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

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月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端—…

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