当需要为不同屏幕大小添加不同脚本的时候，首先需要检测对应的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. SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape

    "F:\program files (x86)\Python35\python.exe" "F:/program files (x86)/JetBrains/Seleni ...

  2. append、extend与insert的区别

    最近在自学Python语言,看到向列表增加更多数据时被append(),extend(),insert()方法绕晕了. 作为编程0基础的小白,觉得有必要自己再梳理一遍: 1.append()方法是指在 ...

  3. 关于 LindedList 我想说

    LinkedList 的一些认识: 继承于AbstractSequentialList的双向链表,可以被当作堆栈.队列或双端队列进行操作 有序,非线程安全的双向链表,默认使用尾部插入法 适用于频繁新增 ...

  4. bzoj1087 [SCOI2005][状压DP] 互不侵犯King （状压）

    在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. Input 只有一行,包含两个数N,K ( 1 ...

  5. （转）simhash算法原理及实现

    simhash是google用来处理海量文本去重的算法. google出品,你懂的. simhash最牛逼的一点就是将一个文档,最后转换成一个64位的字节,暂且称之为特征字,然后判断重复只需要判断他们 ...

  6. B树、B+树、B*树

    二叉搜索树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如 ...

  7. html基础知识笔记

    HTML基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构 头部(head) 头部是网页的标 ...

  8. ASP.NET没有魔法——第一个ASP.NET应用《MyBlog》

    创建一个ASP.NET MVC应用程序 在之前文章中介绍了ASP.NET中提供了3个开发动态网页的框架,分别是Web Form.MVC以及Web Pages,也大概介绍了它们的特点. 其中MVC对于其 ...

  9. jquery系列教程2-style样式操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  10. java连接sqlserver2008r2 心得

    现在是该轻松一笑的时候了,困扰已久的问题有了解释了. 之前的各种连不上,说到底还是权限问题,sqlserver2008r2的权限分得太细了. 两个实例间数据库互相都看不到,更不用谈访问了. 端口号也是 ...