当需要为不同屏幕大小添加不同脚本的时候，首先需要检测对应的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. getField()和select()方法的区别

    在ThinkPHP中,查询数据库是必不可少的操作. 那么,getField()方法和select()方法都是查询的方法,到底有什么不同呢? 案例来说明: A.select()方法 例子1 $acces ...

  2. 实例讲解webpack的基本使用第二篇

    这一篇来讲解一下如何设置webpack的配置文件webpack.config.js 我们新建一个webpack-demo的项目文件夹,然后安装webpack 执行如下命令 在项目文件夹下,建一个dis ...

  3. 洗礼灵魂，修炼python（7）--元组，集合，不可变集合

    前面已经把列表的基本用法讲解完 接着讲python的几大核心之--元组(tuple) 1.什么是元组? 类似列表,但为不可变对象,之前提到列表是可变对象,所谓可变对象就是支持原处修改,并且在修改前后对 ...

  4. 初学node.js有感三

    WebStorm下的node.js 一.回顾与继续       在前面,我们知道了node.js的基本框架和思路,在这些原生环境下我们对node.js的设计思想有了比较深刻的认识,并且具有了编写大型程 ...

  5. C++ Primer Plus 6 第二章

    // myfirst.cpp--displays a message #include <iostream> // a PREPROCESSOR directive int main() ...

  6. 获取报告 Stream转string，利用字符串分割转换成DataTable

    protected void Button1_Click(object sender, EventArgs e) { MemoryStream stream = new MemoryStream(); ...

  7. MSSQL 自定义函数详解

    自定义函数分为:标量值函数或表值函数 如果 RETURNS 子句指定一种标量数据类型,则函数为标量值函数.可以使用多条 Transact-SQL 语句定义标量值函数. 如果 RETURNS 子句指定 ...

  8. BaseServlet，让一个servlet处理多个请求

    BaseServlet 第一次学习servlet的时候是跟着传智播客免费的教学视频,其中崔希凡讲的是我学过自认讲的最好的一位,BaseServlet也是跟着他写过一次,当时很多东西不能理解,后来慢慢发 ...

  9. Jmeter脚本录制方法（二）——手工编写脚本（jmeter与fiddler结合使用）

    jmeter脚本录制方法可以分三种,前几天写的一篇文章中,已介绍了前两种,今天来说下第三种,手工编写脚本,建议使用这一种方法,虽然写的过程有点繁琐,但调试脚本比前两者方式都要便捷. 首先来看下三种方式 ...

  10. dig 命令使用

    1.简单查询 # dig www.guoxh.cn 2.按记录类型查询,默认为A记录 # dig www.guoxh.cn cname # dig www.guoxh.cn mx # dig www. ...