当需要为不同屏幕大小添加不同脚本的时候，首先需要检测对应的media query 是否起效

也就是CSS（ @screen only and (min-width: 40em) {}）和javascript（ if (window.matchMedia( "screen and (min-width:40em)" )) { }）上各查询了一次
但无论怎样都依赖于CSS media query

 
定义分界点：网页或者网页应用的某些方面需要发生改变的特定情况就是分界点所在
 
css media不是唯一能够实现改变的方法
 
应该转变观念
分解点应该理解为出现菜单按钮的情况，40em就是那个情况出现的时候，而不是说media query（或者窗口的大小）作为分界点

脚本检测 media query 分界点的更多相关文章

  1. 一种让 IE6/7/8 支持 media query 响应式设计的方法

    在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 med ...

  2. media query ie8- 兼容实现总结

    虽然说响应式设计的理想状态是,需对pc/移动各种终端进行响应:但是现实是高分辨率的pc端与手机终端屏幕相差太大,像电商这样有大量图片和文字信息的同时排版要求精准的页面,设计一个同时适应高分辨率pc又适 ...

  3. media type与media query

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  4. media query(媒体查询)和media type(媒体类型)

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  5. 响应式设计的思考:媒体查询(media query)

    Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...

  6. tips 前端 各个设备的页面尺寸的media query 与页面高度的经验总结

    有段时间 扑了一个多月的在一个wifi的前端项目上 快做完时 各种小问题一堆一堆的修复 处理了一些很零散的问题 因为页面有一个所有页面都有一个背景色 有的页面有背景图 主要重点是移动前端的方向 因为现 ...

  7. iPhone CSS media query（媒体查询）

    iPhone5  iPhone6  iPhone6Plus iPad设备 media query(媒体查询)代码. iPhone < 5: @media screen and (device-a ...

  8. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  9. viewport和media query

    viewport: 你可以定义viewport的宽度.如果你不使用width=device-width,在移动端上你的页面延伸会超过视窗布局的宽度(width=980px),如果你使用了width=d ...

随机推荐

  1. 关于form表单或者Ajax向后台发送数据时，数据格式的探究

    最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求 假设发送的数据是这样的: data = {'s ...

  2. Dubbo服务接口的设计原则

    1.接口粒度 1.1 服务接口尽可能大粒度,每个服务方法应代表一个功能,而不是某功能的一个步骤,否则将面临分布式事务问题,Dubbo暂未提供分布式事务支持.同时可以减少系统间的网络交互. 1.2 服务 ...

  3. 为什么ABAP开发者需要使用面向对象技术？

    ABAP对面向对象的支持已有十多年的历史,然而在生产实践中,我们对这门技术的应用十分有限. 一方面,面向过程的惯性长期存在着:另一方面,对于大部分二次开发工作而言,似乎并没有足够的理由促使开发者使用面 ...

  4. NOIP 11.01 应试记录

    快排代码 void quicksort(int left,int right) { int u,j,t,temp; if(letf>right) return; temp=a[left]; i= ...

  5. LCT学习笔记

    最近自学了一下LCT(Link-Cut-Tree),参考了Saramanda及Yang_Zhe等众多大神的论文博客,对LCT有了一个初步的认识,LCT是一种动态树,可以处理动态问题的算法.对于树分治中 ...

  6. 在项目中创建单元测试时junit的配置和使用

    首先配置项目中AndroidMainfest.xml文件,加入 <instrumentation android:name="android.test.InstrumentationT ...

  7. ZOJ2402 Lenny's Lucky Lotto List 简单DP

    Lenny's Lucky Lotto Lists Time Limit: 2 Seconds      Memory Limit:65536 KB Lenny likes to play the g ...

  8. IDL 字符串

    1.创建字符串 字符串和字符串数组通过赋值或函数方式来创建.在IDL字符串用" "或' '括起来表示. IDL> s1="abcdef" IDL> ...

  9. typescript 的 polyfill 学习1-Class 继承篇

    Class 继承 js 是多范式的编程语言,同样也是支持面向对象编程的,类 是面向对象中是很重要的概念. 区别于传统的java,c#基于模板的类,js是基于原型的. 类继承一般是通过原型链的方式来实现 ...

  10. C#常用的字符串处理方法

    1.Replace(替换字符):public string Replace(char oldChar,char newChar);在对象中寻找oldChar,如果寻找到,就用newChar将oldCh ...