Bulma CSS - 响应式_bulma响应式_kevinhwu的博客-程序员宅基地

技术标签: css  纯css  css框架  bulma  前端  


系列教程

Bulma CSS – 简介
Bulma CSS – 开始
Bulma CSS – CSS类
Bulma CSS – 模块化
Bulma CSS – 响应式


Bulma是一个支持响应式的框架,在电脑、手机、平板各种尺寸的屏幕上都可以完美呈现网页。

手机显示

Bulma对于手机显示作了优化:

  • columnslevel等水平布局在手机上将会垂直排列显示
  • nav导航菜单在手机上将被折叠

如果想在手机上强制水平布局显示,可以给columnslevelis-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)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43031412/article/details/90437270

智能推荐

C++基础小程序——走向程序员的第一步_c++简单小程序_poison_biti的博客-程序员宅基地

"Student.h"#pragma once#include void Swap1(int* num1,int* num2){ int tmp = *num1; *num1 = *num2; *num2 = tmp;}void Swap2(int* num1,int* num2){ *num1 = (*num1)*(*num2); *num2 = (*num1)/(*

Spring MVC项目_chapterlist_sorrow_more的博客-程序员宅基地

一、配置(一)web.xml的配置maven在为我们创建web项目时(具体可见博客:第一个Spring MVC的磕磕绊绊)会自动为我们生成一个web.xml,maven自动生成的web.xml是使用web 2.3的标准,在这个标准下jsp页面会自动的为我们吧EL表达式语言关闭,所以希望使用2.4版本。即将注释部分的2.3版本换成下面的2.4版本。这时候会报一个错误如下图所示。这个错...

win10电脑不显示手机连接服务器失败,手机投屏win10电脑失败的解决方案_一只帅鸟的博客-程序员宅基地

手机投屏win10电脑失败的解决方案1.查看手机和电脑是否连接了同一WiFi,注意WiFi的频率要一致,均为2.4GHz或5GHz。若发现不一致,连接到同一WiFi下再次尝试投屏即可。①手机端点击设置-&gt;无线网络-&gt;所连接的WiFi即可查看WiFi频率。②电脑端点击任务栏右下角的WiFi图标-&gt;属性进行查看。2.查看电脑是否设置了接通电源才可发现此电脑并进行投影。设置-&gt;系...

mips 汇编学习_weixin_34168700的博客-程序员宅基地

为什么80%的码农都做不了架构师?&gt;&gt;&gt; ...

linux 下命令编码转换_piconv_nomisshe的博客-程序员宅基地

用 iconv , 没有就用 piconv,用法iconv -f "gbk" -t "utf-8" outfilepiconv -f "gbk" -t "utf-8" outfile如果太多档案,写个 bash 脚本,放到要转换编码的目录里,脚本这样#! /bin/bashICONV=iconvif ! which $ICONV &> /dev/null then

随便推点

【XCTF 攻防世界】杂项 misc 高手进阶区 hit-the-core_攻防世界 hit-the-core_Kal1的博客-程序员宅基地

知识补充:Core文件作用、设置及用法浅析Linux下core文件我们可以使用strings命令查看字符串内容strings命令打印文件中可打印的字符每隔四个小写字母就可以看到一个大写字母,刚好是ALEXCTF 照着这个规律找下去,得到flag :ALEXCTF{K33P_7H3_g00D_w0rk_up}str='cvqAeqacLtqazEigwiXobxrCrtuiTzahfFreqc{bnjrKwgk83kgd43j85ePgb_e_rwqr7fvbmHjklo3tews_hmko

[Android]Toolbar_Hdnw的博客-程序员宅基地

Toolbar是由AndroidX库提供的,它的强大之处在于,它不仅继承了ActionBar的所有功能,并且灵活度很高,可以配合其他控件完成一些Material Design的效果。Theme.MaterialComponents.DayNight.NoActionBar:表示浅色主题,它会将界面的主题颜色设成浅色,陪衬颜色设为深色。Theme.MaterialComponents.NoActionBar:表示深色主题,它会将界面的主题颜色设成深色,陪衬颜色设为浅色。在themes的两个xml文件中,

lg android tv遥控器,LG TV Remote遥控器_Justmeet的博客-程序员宅基地

CautionThisapplicationiscompatibleonlywithLGSmartTVswhicharereleasedin2012orlater.IfyouownaLGSmartTVreleasedin2011orbeforepleaseusethe“LGTVRemote2011”application.Y...

Typora字体颜色设置_李南想做条咸鱼的博客-程序员宅基地

Typora字体颜色设置HTMLYou can use HTML to style content what pure Markdown does not support. For example, use &lt;span style="color:red"&gt;this text is red&lt;/span&gt; to add text with red color.综合以上官方文档所述,我们可以利用HTML的标签来对我们的字体大小、颜色等综合属性进行设置例如:&lt;p styl

Ubuntu 下配置lamp环境_苏卡达的博客-程序员宅基地

步骤一,安装apache21sudo apt-get install apache2安装完成。 运行如下命令重启下:1sudo /etc/init.d/apache2 restart在浏览器里输入http://localhost或者是http:

用python绘制彩色蟒蛇_Rajer911的博客-程序员宅基地

《python语言程序设计基础》-嵩天主编。第二章,实例2.3绘制蟒蛇,引入turtle库,绘制彩色(花里胡哨的)蟒蛇。

推荐文章

热门文章

相关标签