在 Bulma 中将设备分为 6 类:手机、平板、触屏设备、桌面、宽屏和大屏。提供了四个阈值。

// sass/utilities/variables.sass

$tablet: 769px !default
$desktop: 1000px !default
$widescreen: 1192px !default
$fullhd: 1384px !default

这些设备及对应设备宽度的范围如下:

  1. 手机:0px ~ 768px
  2. 平板:769px ~ 999px
  3. 触屏设备:0px ~ 999px
  4. 桌面:1000px ~ 1191px
  5. 宽屏:1192px ~ 1383px
  6. 大屏:1384px+

我们使用混合定义设备的媒体查询。

=from($device)
@media screen and (min-width: $device)
@content =until($device)
@media screen and (max-width: $device - 1px)
@content // 平板宽度以下的设备认为是手机设备
=mobile
@media screen and (max-width: $tablet - 1px)
@content =tablet
@media screen and (min-width: $tablet)
@content // 仅在平板设备下
=table-only
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
@content // 桌面宽度以下的设备认为是触屏设备
=touch
@media screen and (max-width: $desktop - 1px)
@content =desktop
@media screen and (min-width: $desktop)
@content // 仅在桌面设备下
=desktop-only
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
@content =widescreen
@media screen and (min-width: $widescreen)
@content // 仅在宽屏设备下
=widescreen-only
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
@content =fullhd
@media screen and (min-width: $fullhd)
@content

接下来,如果要针对某个设备下进行样式编写,则可以这样使用。

.container
+desktop
margin: 0 auto
width: $desktop - 40px

正如上面代码反映的一样,在桌面环境+的设备中,.container 的宽度固定为“$desktop - 40px”,也就是 960px,然后居中显示。

(完)

Bulma 中的媒体查询的更多相关文章

  1. vue中 用媒体查询 空置根节点字体大小

    在index.html中 <style> @media all and (min-width: 0px) { html{font-size: 20px;}/* 12*4.6 */ } @m ...

  2. 在javascript中使用媒体查询media query

    由于需要,我们可能会在js中用到一些media query,从而针对不同的分辨率做一些操作. //全兼容的 事件绑定 and 阻止默认事件 var EventUtil = { //Notice: ty ...

  3. 媒体查询的应用以及在css3中的变革

    CSS一直都支持设置与媒体相关联的样式表.它们可以适应不同媒体类型的显示.例如,文档在屏幕显示时使用sans-serif字体,在打印时则使用serif字体.screen和print是两种预定义的媒体类 ...

  4. 深入理解CSS Media媒体查询

    × 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...

  5. 关于css3媒体查询和响应式布局

    响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...

  6. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  7. 免费的HTML5连载来了《HTML5网页开发实例详解》连载(六)媒体查询

    响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...

  8. 响应式web之媒体查询(一)

    HTML4和css2目前支持为不用的媒体类型设定专有的样式,如,一个页面在屏幕上时使用无衬线字体,而在打印时使用衬线字体.screen和print是两种已定义的媒体类型.媒体查询让样式表有更强的针对性 ...

  9. 免费的HTML5连载来了《HTML5网页开发实例具体解释》连载(六)媒体查询

    响应式设计的还有一个重要技术手段是媒体查询.假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上 ...

随机推荐

  1. CF 85E Guard Towers——二分图染色

    题目:http://codeforces.com/contest/85/problem/E 当然是二分.然后连一个图,染色判断是不是二分图即可.方案数就是2^(连通块个数). 别真的连边!不然时间空间 ...

  2. MyEclipse安装jbpm插件

    介绍如何在MyEclipse8.6里安装jbpm插件. 工具/原料 MyEclipse8.6 jbpm-4.4.rar 方法/步骤 1 下载jbpm包并解压 下载最新的jbpm包,本文以jbpm4.4 ...

  3. 通过Azure File Service搭建基于iscsi的共享盘

    在Azure上目前已经有基于Samba协议的共享存储了. 但目前在Azure上,还不能把Disk作为共享盘.而在实际的应用部署中,共享盘是做集群的重要组件之一.比如仲裁盘.Shared Disk等. ...

  4. [转载]Linux内核list_head学习(二)

    前一篇文章讨论了list_head 结构的基本结构和实现原理,本文主要介绍一下实例代码. 自己如果想在应用程序中使用list_head 的相应操作(当然应该没人使用了,C++ STL提供了list 用 ...

  5. Spring Boot 集成Swagger2生成RESTful API文档

    Swagger2可以在写代码的同时生成对应的RESTful API文档,方便开发人员参考,另外Swagger2也提供了强大的页面测试功能来调试每个RESTful API. 使用Spring Boot可 ...

  6. svn-clearup 报错的处理(Cleanup failed to process the following paths...)

    在使用 svn 客户端执行操作失败后,执行 Clean up 操作也报错:Cleanup failed to process the following paths... ,一直不知道是什么原因.通常 ...

  7. Cache-Control头

    介绍 Cache-Control头在HTTP中有一定的难度,第一它既可以用于请求头,也可以用于响应头(这里主要将响应缓存).第二,它控制着两个缓存,本地缓存:指客户端本地及其中的缓存(大多指浏览器缓存 ...

  8. demo1 spark streaming 接收 kafka 数据java代码WordCount示例

    1. 首先启动zookeeper windows上的安装见zk 02之 Windows安装和使用zookeeper 启动后见: 2. 启动kafka windows的安装kafka见Windows上搭 ...

  9. c# 设置水印,消除水印

    方案1: 图像处理 opencv etc 方案2: 开源框架,直接使用,已经优化 https://github.com/itext/itextsharp https://github.com/itex ...

  10. Centos 7.2 编译安装 git

    一. 下载最新版GIT安装包: https://www.kernel.org/pub/software/scm/git/ 选择想要安装的版本,下载,解压 命令: .tar.gz $ cd git- 二 ...