Bulma CSS - 响应式
时间:2019-09-16
本文章向大家介绍Bulma CSS - 响应式,主要包括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)
|
原文地址:https://www.cnblogs.com/haibianren/p/11525822.html
- 左手用R右手Python系列——动态网页抓取与selenium驱动浏览器
- 【Leetcode235】关关的刷题日记66 –Lowest Common Ancestor of a BST
- 初探Kotlin+SpringBoot联合编程
- 【Leetcode 303】关关的刷题日记67–Leetcode 303 Range Sum Query – Immutable
- 【Leetcode 70】关关的刷题日记68 – Leetcode 70 Climbing Stairs
- Linq 集合操作
- 【Leetcode 198】关关的刷题日记69 – Leetcode 198 House Robber
- 【关关的刷题日记60】Leetcode 437. Path Sum III
- Easyui DataGrid DateRange Filter 漂亮实用的日期区间段筛选功能
- Python黑帽编程2.3 字符串、列表、元组、字典和集合
- AssemblyExecuteAdapter
- MySQL入门学习笔记——七周数据分析师实战作业
- 左手用R右手Python系列——七周数据分析师学习笔记R语言、Python版
- Python Numpy学习教程(一)Python篇
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- C++ 实现通过类名来进行实例化(反射机制?)
- Flutter基础widgets教程-ExpansionPanel篇
- muduo TcpServer粗略过程
- muduo 超时重连
- EventLoop,TcpClient,TcpServer 中的生命周期
- functional 和 bind 用法
- Flutter基础widgets教程-FittedBox篇
- muduo Dispatcher消息分发器 通过多态和模板进行向上类型转换
- Flutter基础widgets教程-FloatingActionButton篇
- VBS基础篇 - 对象(3) - FileSystemObject对象
- vbs 实现文件夹拷贝--采用堆栈不递归
- vbs - 一个简单的栈 -- 只能存储类对象
- Flutter基础widgets教程-FlutterLogo篇
- 配置压缩版mysql 5.7以上版本
- nutz 自定义sql的使用