如何在JS中使用CSS媒体查询的分界点

Importing CSS Breakpoints Into Javascript 响应式设计中，如果CSS中更改了分界点，如何让JS的检测也随之改变。本例给出了兼容IE9+的一个解决方案。 Source: https://www.lullabot.com/blog/article/simpler-solution-bring-css-breakpoints-javascript

css3, breakpoint

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3200
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/**
 * These values will not show up in content, but can be 
 * queried by JavaScript to know which breakpoint is active.
 * Add or remove as many breakpoints as you like.
 */

body:before {
    content: "smartphone";
    /* Prevent from displaying. */
    
    display: none;
}
@media (min-width: 550px) {
    body:before {
        content: "smartphone_wide";
    }
}
@media (min-width: 650px) {
    body:before {
        content: "tablet_narrow";
    }
}
@media (min-width: 900px) {
    body:before {
        content: "tablet_wide";
    }
}
@media (min-width: 1100px) {
    body:before {
        content: "desktop";
    }
}
@media (min-width: 1500px) {
    body:before {
        content: "wide";
    }
}
@media (min-width: 2000px) {
    /* A bit of fluff */
    
    body:before {
        content: "OMG_THATS_SO_HUGE";
    }
}
::selection {
    background: #ca322c;
    color: white;
}
body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.16em;
    color: #4b4b4b;
    margin-top: 50px;
}
p {
    width: 80%;
    max-width: 600px;
    padding-left: 10%;
}
a {
    color: #ca322c;
}
.breakpoint {
    background-color: #ca322c;
    color: white;
    display: inline-block;
    padding: 2px 4px;
}

HTML

Importing CSS Breakpoints Into Javascript 响应式设计中，如果CSS中更改了分界点，如何让JS的检测也随之改变。本例给出了兼容IE9+的一个解决方案。 Source: https://www.lullabot.com/blog/article/simpler-solution-bring-css-breakpoints-javascript

css3, breakpoint

编辑器支持Emmet

快捷键

Importing CSS Breakpoints Into Javascript 响应式设计中，如果CSS中更改了分界点，如何让JS的检测也随之改变。 本例给出了兼容IE9+的一个解决方案。 Source: https://www.lullabot.com/blog/article/simpler-solution-bring-css-breakpoints-javascript

css3, breakpoint

使用纯CSS3实现相片在时光流转中褪色的动画特效

如何使用CSS制作在线电子书

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Importing CSS Breakpoints Into Javascript 响应式设计中，如果CSS中更改了分界点，如何让JS的检测也随之改变。本例给出了兼容IE9+的一个解决方案。 Source: https://www.lullabot.com/blog/article/simpler-solution-bring-css-breakpoints-javascript