当需要为不同屏幕大小添加不同脚本的时候，首先需要检测对应的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. CentOS6.x服务器OpenSSH平滑7.3p版本——拒绝服务器漏洞攻击

    对于新安装的Linux服务器,默认OpenSSH及OpenSSL都不是最新的,需要进行升级以拒绝服务器漏洞攻击.本次介绍的是升级生产环境下CentOS6.x系列服务器平滑升级OpenSSL及OpenS ...

  2. B树、B+树、B*树

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

  3. FPGA与PCI-E

    从并行到串行: PCI Express(又称PCIe)是一种高性能.高带宽串行通讯互连标准,取代了基于总线的通信架构,如:PCI.PCI Extended (PCI-X) 以及加速图形端口(AGP). ...

  4. M-自适应宽高样式

    1 绝对定位 position: absolute; top: 0px; bottom: 0px; left: 0px; width: 100%; overflow: hidden;

  5. [#1] YCbCr与RGB的转换公式

    1 YCbCr简介 YCbCr颜色空间是将RGB颜色空间进行坐标转换后得到的,常用于数字电视系统.Y取值范围:16~235 Cb.Cr的取值范围:16~240 YCbCr经常和YUV混淆.两者的主要差 ...

  6. spring cloud+dotnet core搭建微服务架构：配置中心续（五）

    前言 上一章最后讲了,更新配置以后需要重启客户端才能生效,这在实际的场景中是不可取的.由于目前Steeltoe配置的重载只能由客户端发起,没有实现处理程序侦听服务器更改事件,所以还没办法实现彻底实现这 ...

  7. 在 Ubuntu 14.04 中安装 Pepper Flash Player For Chromium

    转自:http://blog.csdn.net/ygzhong000/article/details/26160953

  8. Kotlin——最详细的控制语句使用

    在前面 的章节中讲解了Kotlin语言中的数据类型.变量与常量的定义.不了解请参见前面的内容: Kotlin从无到有系列之数据类型介绍. Kotlin从无到有系列之变量.常量.注释的使用. 下面详细为 ...

  9. （转）关于Tomcat的点点滴滴（体系架构、处理http请求的过程、安装和配置、目录结构、设置压缩和对中文文件名的支持、以及Catalina这个名字的由来……等）

    转自:http://itfish.net/article/41668.html   总结Tomcat的体系架构.处理http请求的过程.安装和配置.目录结构.设置压缩和对中文文件名的支持.以及Cata ...

  10. LINUX 笔记-vmstat命令

    procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- r b swpd free buff ...