Foundation CSS 可见性1

简介: Foundation CSS 的可见性类可根据屏幕尺寸控制元素的显示。例如,`.show-for-small-only` 类仅在小屏设备(<40.0625em)上显示元素,而 `.show-for-medium-up` 类则在中型及以上设备(≥40.0625em)上显示。这些类帮助开发者根据不同设备优化界面布局。

Foundation CSS 可见性
根据屏幕尺寸显示元素
以下类会根据设备(屏幕尺寸)来显示元素。

类 描述
.show-for-small-only 只在小型设备上显示元素 (屏幕宽度小于 40.0625em )
.show-for-medium-up 在中型及以上设备上显示元素 (屏幕宽度大于 40.0625em)
.show-for-medium-only 只在中型设备上显示元素 (屏幕宽度在 40.0625em 到 64.0625em 之间)
.show-for-large-up 在大型及以上设备上显示元素 (屏幕宽度大于 64.0625em)
.show-for-large-only 只在大型设备上显示元素 (屏幕宽度在 64.0625em 到 90.0625em 之间)
.show-for-xlarge-up 在更大型及以上设备上显示元素 (屏幕宽度大于 90.0625em)
.show-for-xlarge-only 只在更大型及以上设备上显示元素 (屏幕宽度在 90.0625em 到 120.0625em之间)
.show-for-xxlarge-up 在超大型及以上设备上显示元素 (屏幕宽度大于 120.0625em)
以下实例演示了以上所有 .show- 类的可见性。

你在小型设备上。


你在中型、大型、更大型、超大型的设备上。


你在中型设备上。


你在大型、更大型、超大型的设备上


你在大型设备上。


你在更大型、超大型的设备上。


你在更大型设备上。


你在超大型设备上。

相关文章
|
1月前
|
前端开发
Foundation CSS 可见性4
简介:通过使用 `.show-for-touch` 和 `.hide-for-touch` 类,可以根据设备是否支持触屏来控制元素的显示与隐藏。示例中,支持触屏的设备会显示“你的设备支持触屏。”,而不支持的则显示“你的设备不支持触屏。”
|
2月前
|
前端开发
Foundation CSS 可见性2
根据屏幕尺寸隐藏元素的类,如 `.hide-for-small-only` 仅在小屏设备(&lt;40.0625em)上隐藏,`.hide-for-medium-up` 在中型及以上设备(≥40.0625em)上隐藏等,适用于响应式设计。
|
2月前
|
前端开发
Foundation CSS 可见性3
根据屏幕方向显示元素:使用特定类可使元素在不同屏幕方向下显示或隐藏。例如,`.show-for-landscape` 类让元素仅在横屏时显示,而 `.show-for-portrait` 类则让元素仅在竖屏时显示。示例代码展示了如何根据屏幕方向显示不同的文本内容。
|
2月前
|
前端开发
Foundation CSS 参考手册3
此段内容介绍了几个常用的CSS类及其功能:.left 和 .right 分别使元素向左或向右浮动;.clearfix 用于清除浮动,需添加于浮动元素的父元素上;.hide 通过设置 CSS display 属性为 none 来隐藏元素;.list-inline 可将列表项水平排列;.lead 使文本更加突出;.subheader 用于设置浅色的标题元素。
|
2月前
|
前端开发
Foundation CSS 参考手册2
本文介绍了如何使用CSS类实现文本对齐,包括基本的左、右、居中和两端对齐,以及针对不同屏幕尺寸的特定对齐方式,如小屏、中屏、大屏等,每个类别都有相应的示例供测试。
|
2月前
|
前端开发
Foundation CSS 参考手册1
Foundation CSS参考手册:Foundation框架默认使用浏览器字体大小(通常16px),移动设备为12px,字体为&quot;Helvetica Neue&quot;,行高1.5。段落底部外边距1.25rem,行高1.6。对h1至h6标题、链接、副标题、引用、加粗、斜体、缩写、键盘输入、水平线、代码片段及列表等HTML元素设置了独立样式,优化了网页显示效果。
|
前端开发
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置
|
5天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
78 24
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
68 7

热门文章

最新文章