Bulma 中的媒体查询
在 Bulma 中将设备分为 6 类:手机、平板、触屏设备、桌面、宽屏和大屏。提供了四个阈值。
// sass/utilities/variables.sass
$tablet: 769px !default
$desktop: 1000px !default
$widescreen: 1192px !default
$fullhd: 1384px !default
这些设备及对应设备宽度的范围如下:
- 手机:0px ~ 768px
- 平板:769px ~ 999px
- 触屏设备:0px ~ 999px
- 桌面:1000px ~ 1191px
- 宽屏:1192px ~ 1383px
- 大屏: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 中的媒体查询的更多相关文章
- vue中 用媒体查询 空置根节点字体大小
在index.html中 <style> @media all and (min-width: 0px) { html{font-size: 20px;}/* 12*4.6 */ } @m ...
- 在javascript中使用媒体查询media query
由于需要,我们可能会在js中用到一些media query,从而针对不同的分辨率做一些操作. //全兼容的 事件绑定 and 阻止默认事件 var EventUtil = { //Notice: ty ...
- 媒体查询的应用以及在css3中的变革
CSS一直都支持设置与媒体相关联的样式表.它们可以适应不同媒体类型的显示.例如,文档在屏幕显示时使用sans-serif字体,在打印时则使用serif字体.screen和print是两种预定义的媒体类 ...
- 深入理解CSS Media媒体查询
× 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...
- 关于css3媒体查询和响应式布局
响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载(六)媒体查询
响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...
- 响应式web之媒体查询(一)
HTML4和css2目前支持为不用的媒体类型设定专有的样式,如,一个页面在屏幕上时使用无衬线字体,而在打印时使用衬线字体.screen和print是两种已定义的媒体类型.媒体查询让样式表有更强的针对性 ...
- 免费的HTML5连载来了《HTML5网页开发实例具体解释》连载(六)媒体查询
响应式设计的还有一个重要技术手段是媒体查询.假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上 ...
随机推荐
- CF 85E Guard Towers——二分图染色
题目:http://codeforces.com/contest/85/problem/E 当然是二分.然后连一个图,染色判断是不是二分图即可.方案数就是2^(连通块个数). 别真的连边!不然时间空间 ...
- MyEclipse安装jbpm插件
介绍如何在MyEclipse8.6里安装jbpm插件. 工具/原料 MyEclipse8.6 jbpm-4.4.rar 方法/步骤 1 下载jbpm包并解压 下载最新的jbpm包,本文以jbpm4.4 ...
- 通过Azure File Service搭建基于iscsi的共享盘
在Azure上目前已经有基于Samba协议的共享存储了. 但目前在Azure上,还不能把Disk作为共享盘.而在实际的应用部署中,共享盘是做集群的重要组件之一.比如仲裁盘.Shared Disk等. ...
- [转载]Linux内核list_head学习(二)
前一篇文章讨论了list_head 结构的基本结构和实现原理,本文主要介绍一下实例代码. 自己如果想在应用程序中使用list_head 的相应操作(当然应该没人使用了,C++ STL提供了list 用 ...
- Spring Boot 集成Swagger2生成RESTful API文档
Swagger2可以在写代码的同时生成对应的RESTful API文档,方便开发人员参考,另外Swagger2也提供了强大的页面测试功能来调试每个RESTful API. 使用Spring Boot可 ...
- svn-clearup 报错的处理(Cleanup failed to process the following paths...)
在使用 svn 客户端执行操作失败后,执行 Clean up 操作也报错:Cleanup failed to process the following paths... ,一直不知道是什么原因.通常 ...
- Cache-Control头
介绍 Cache-Control头在HTTP中有一定的难度,第一它既可以用于请求头,也可以用于响应头(这里主要将响应缓存).第二,它控制着两个缓存,本地缓存:指客户端本地及其中的缓存(大多指浏览器缓存 ...
- demo1 spark streaming 接收 kafka 数据java代码WordCount示例
1. 首先启动zookeeper windows上的安装见zk 02之 Windows安装和使用zookeeper 启动后见: 2. 启动kafka windows的安装kafka见Windows上搭 ...
- c# 设置水印,消除水印
方案1: 图像处理 opencv etc 方案2: 开源框架,直接使用,已经优化 https://github.com/itext/itextsharp https://github.com/itex ...
- Centos 7.2 编译安装 git
一. 下载最新版GIT安装包: https://www.kernel.org/pub/software/scm/git/ 选择想要安装的版本,下载,解压 命令: .tar.gz $ cd git- 二 ...