Bulma CSS - 响应式
Bulma CSS框架教程
Bulma CSS – 简介
Bulma CSS – 开始
Bulma CSS – CSS类
Bulma CSS – 模块化
Bulma CSS – 响应式
Bulma是一个支持响应式的框架,在电脑、手机、平板各种尺寸的屏幕上都可以完美呈现网页。
手机显示
Bulma对于手机显示作了优化:
columns
、level
等水平布局在手机上将会垂直排列显示nav
导航菜单在手机上将被折叠
如果想在手机上强制水平布局显示,可以给columns
、level
加is-mobile
修饰符。
屏幕界线
Bulma规定了5个屏幕宽度界线,区分不同类型的屏幕:
- mobile/手机: <= 768px
- tablet/平板: 769px ~ 1023px
- desktop/桌面: 1024px ~ 1215px
- widescreen/宽屏: 1216px ~ 1407px
- fullhd/全屏高清: >= 1408px
禁用某些屏幕界线
默认情况下,sass源代码中$widescreen-enabled
和$fullhd
屏幕界线是启用的,可以通过如下修改禁用:
// Disable the widescreen breakpoint
$widescreen-enabled: false
// Disable the fullhd breakpoint
$fullhd-enabled: false
SASS变量
在SASS源代码中,响应式支持相关的一些变量定义如下:
变量名 | 类型 | 默认真 | 计算值 |
---|---|---|---|
$gap
|
size |
64px
|
|
$tablet
|
size |
769px
|
|
$desktop
|
computed |
960px + (2 * $gap)
|
|
$widescreen
|
computed |
1152px + (2 * $gap)
|
|
$fullhd
|
computed |
1344px + (2 * $gap)
|
Bulma CSS - 响应式的更多相关文章
- html响应式布局,css响应式布局,响应式布局入门
html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...
- CSS响应式布局到底是什么?
响应式布局是最近几年在前端开发中非常火热的词,它是相对于固定像素大小的网页而言的,那么CSS响应式布局到底是什么?顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献 ...
- css - 响应式
css - 响应式 移动设备尺寸 移动设备的尺寸各不相同,大体上可以做如下划分: 768px以下的是手机屏幕 768px-991px是平板ipad屏幕 992px-1199是大平板屏幕 1200极其以 ...
- css响应式布局RWD
响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max- ...
- CSS 响应式设计
响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...
- CSS响应式web设计
参考 1. 响应式web设计之CSS3 Media Queries http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html 2. 用 ...
- css响应式设计
响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...
- JS/CSS 响应式样式实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- css 响应式(媒介查询)
1.CSS 来实现响应式 CSS实现响应式网站的布局要用到的就是CSS中的媒体查询接下来来简单介绍一下: @media 类型 and (条件1) and (条件二){css样式} <link r ...
随机推荐
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:默认/标准按钮
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 解题报告:luogu P1516 青蛙的约会
题目链接:P1516 青蛙的约会 考察拓欧与推式子\(qwq\). 题意翻译? 求满足 \[\begin{cases}md+x\equiv t\pmod{l}\\nd+y\equiv t\pmod{l ...
- php 实现店铺装修7
type_id=0的情况 type_id=1的情况 type_id=2的情况 /** * @title 店铺装修--商品分类 * @param type ...
- python笔记12
day12 今日内容 函数中高级(闭包/高阶函数) 内置函数 内置模块(.py文件) 内容回顾 函数基础概念 函数基本结构 def func(arg): return arg; v1 = func(1 ...
- 通过注册码破解IntelliJ IDEA
把激活码填入下面的地方即可.如果不知道在哪里,那么就选菜单栏里的help再选Register就会弹出下面的界面 激活码网址里面有 lookdiv.com 里面的钥匙就是lookdiv.com
- 小程序mdns+udpSocket实现电视推送
起因:公司以前小程序推送架构为:小程序->接口->后台->socket->机顶盒client->socket->后台->接口->小程序,一系列接口才得到 ...
- hadoop 第一个 mapreduce 程序(对MapReduce的几种固定代码的理解)
1.2MapReduce 和 HDFS 是如何工作的 MapReduce 其实是两部分,先是 Map 过程,然后是 Reduce 过程.从词频计算来说,假设某个文件块里的一行文字是”Thisis a ...
- 吴裕雄--天生自然JAVA面向对象高级编程学习笔记:接口的基本实现
interface A{ // 定义接口A public static final String AUTHOR = "李兴华" ; // 全局常量 public abstract ...
- hdu 3549 Flow Problem 最大流问题 (模板题)
Flow Problem Time Limit: 5000/5000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Tota ...
- Ubuntu操作系统部署zabbix agent服务
Ubuntu操作系统部署zabbix agent服务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.下载zabbix软件包 博主推荐阅读: https://www.cnblog ...