当需要为不同屏幕大小添加不同脚本的时候，首先需要检测对应的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. Hive基础（3）---Fetch Task(转)

    我们在执行hive代码的时候,一条简单的命令大部分都会转换成为mr代码在后台执行,但是有时候我们仅仅只是想获取一部分数据而已,仅仅是获取数据,还需要转化成为mr去执行吗?那个也太浪费时间和内存啦,所以 ...

  2. HTML 简述

    1.本页超链接 <a href="#t">查看 Chapter 4.</a> <a name="t">Test</a& ...

  3. Java伪代码描述《大道至简》第一章

    第一节 Begin //原始需求 惩山北之塞,出入之迂 //项目沟通的基本方式 聚室而谋曰 //项目目标 毕力平险,指通豫南,达于汉阴 //技术方案 扣石垦壤,箕畚运于渤海之尾 //技术人员和工程管理 ...

  4. vim 环境设定(通用)

    有没有发现,如果我们以 vim 软件来搜寻一个档案内部的某个字符串时,这个字符串会被反白,而下次我们再次以 vim 编辑这个档案时,该搜寻的字符串反白情况还是存在呢!甚至于在编辑其他档案时,如果其他档 ...

  5. 解决Android5.0以下Dialog引起的内存泄漏

    最近项目开发中,开发人员和测试人员均反应在android5.0以下手机上LeakCanary频繁监控到内存泄漏,如下图所示,但凡用到Dialog或DialogFragment地方均出现了内存泄漏. 如 ...

  6. python爬虫爬取代理IP

    # #author:wuhao # #--*------------*-- #-****#爬取代理IP并保存到Excel----#爬取当日的代理IP并保存到Excel,目标网站xicidaili.co ...

  7. YYHS-NOIP模拟赛-mine

    题解 这道题不难想到用dp来做 dp[i][0]表示第i个格子放0 dp[i][1]表示第i个格子放1且第i-1个格子放雷 dp[i][2]表示第i个格子放2 dp[i][3]表示第i个格子放1且第i ...

  8. python学习记录-socket模块

    主要使用的模块是socket模块,在这个模块中可以找到socket()函数,该函数用于创建套接字对象.套接字也有自己的方法集,这些方法可以实现基于套接字的网络通信. 1.socket类型 构造函数: ...

  9. 使用olami sdk实现一个语音查询股票的iOS程序

    前言 在目前的软件应用中,输入方式还是以文字输入方式为主,但是语音输入的方式目前应用的越来越广泛.在这里介绍一个使用 Olami SDK 编写的一个使用语音输入查询股票的APP Olami SDK的介 ...

  10. Android基础知识03—Activity的基本用法

    ------Activity 活动------ 活动 Activity 是一种包含用户界面的组件,即一个界面就是一个活动 创建活动的过程: >> 创建一个类,继承自Activity类,并且 ...