文章: 阅读:

Foundation CSS 样式

CSSFoundation

前言

  • Foundation 使用浏览器默认字体大小 (font-size: 100%;)。对于大多数桌面设备的浏览器来说，字体大小默认为 16px。对于移动设备的浏览器，字体默认大小为 12px。默认的字体为 “Helvetica Neue”， line-height 默认为 1.5。

  • 这些设置是适用于 <body> 元素内的元素。

  • 此外，<p> 元素与底部的外边距（margin-bottom) 为 1.25rem, line-height 为 1.6。

1、CSS 可见性

1.1 根据屏幕尺寸显示元素

  • 以下类会根据设备 (屏幕尺寸) 来显示元素。
类 描述
.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
    2
    3
    4
    5
    6
    7
    8
    <p class="show-for-small-only">你在小型设备上。</p>
    <p class="show-for-medium-up">你在中型、大型、更大型、超大型的设备上。</p>
    <p class="show-for-medium-only">你在中型设备上。</p>
    <p class="show-for-large-up">你在大型、更大型、超大型的设备上</p>
    <p class="show-for-large-only">你在大型设备上。</p>
    <p class="show-for-xlarge-up">你在更大型、超大型的设备上。</p>
    <p class="show-for-xlarge-only">你在更大型设备上。</p>
    <p class="show-for-xxlarge-up">你在超大型设备上。</p>

  • 效果 🔗

1.2 根据屏幕尺寸隐藏元素

  • 以下类会根据设备 (屏幕尺寸) 来隐藏元素。
类 描述
.hide-for-small-only 只在小型设备上隐藏元素 (屏幕宽度小于 40.0625em )
.hide-for-medium-up 在中型及以上设备上隐藏元素 (屏幕宽度大于 40.0625em)
.hide-for-medium-only 只在中型设备上隐藏元素 (屏幕宽度在 40.0625em 到 64.0625em 之间)
.hide-for-large-up 在大型及以上设备上隐藏元素 (屏幕宽度大于 64.0625em)
.hide-for-large-only 只在大型设备上隐藏元素 (屏幕宽度在 64.0625em 到 90.0625em 之间)
.hide-for-xlarge-up 在更大型及以上设备上隐藏元素 (屏幕宽度大于 90.0625em)
.hide-for-xlarge-only 只在更大型及以上设备上隐藏元素 (屏幕宽度在 90.0625em 到 120.0625em之间)
.hide-for-xxlarge-up 在超大型及以上设备上隐藏元素 (屏幕宽度大于 120.0625em)

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <p class="hide-for-small-only">你不在小型设备上。</p>
    <p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的设备上。</p>
    <p class="hide-for-medium-only">你不在中型设备上。</p>
    <p class="hide-for-large-up">你不在大型、更大型、超大型的设备上。</p>
    <p class="hide-for-large-only">你不在大型设备上。</p>
    <p class="hide-for-xlarge-up">你不在更大型、超大型的设备上。</p>
    <p class="hide-for-xlarge-only">你不在更大型设备上。</p>
    <p class="hide-for-xxlarge-up">你不在超大型设备上。</p>

  • 效果 🔗

1.3 根据屏幕方向显示元素

  • 以下类会根据设备 (屏幕尺寸) 来隐藏元素。

  • 可以设置元素在不同方向是是否显示或隐藏。笔记本等桌面设备一般是横向的，但是手机和平板设备可以是横向或纵向，可以根据用户手机拿的方向来设置元素隐藏与显示：

类 描述
.show-for-landscape 在横向时显示元素（纵向隐藏）
.show-for-portrait 在纵向时显示元素（横向隐藏）

  • 下面实例根据使用的方向显示文本内容：

  • 实例

    1
    2
    <p class="show-for-landscape">文本只在横向显示。</p>
    <p class="show-for-portrait">文本只在纵向显示。</p>

  • 效果 🔗

1.4 触屏设备的显示与隐藏

  • 可以根据设备是否支持触摸来显示与隐藏元素。
类 描述
.show-for-touch 在支持触屏的设备上显示 (不支持的设备上隐藏)
.hide-for-touch 在支持触屏的设备上隐藏 (不支持的设备上显示)

  • 下面实例根据设备是否支持触摸来显示文本内容：

  • 实例

    1
    2
    <p class="show-for-touch">你的设备支持触屏。</p>
    <p class="hide-for-touch">你的设备不支持触屏。</p>

  • 效果 🔗

2、CSS 参考手册

2.1 文本

  • 以下的 HTML 元素，Foundation 设置了独立的样式渲染它，不会采用浏览器默认样式。
类 描述 备注 🔗
<h1> - <h6> h1 - h6 标题 🔗
<a> 浅蓝色的链接，鼠标移动到链接会有下划线 🔗
<small> 浅灰色的副标题文本 🔗
<blockquote> 引用内容模块 🔗
<strong> 加粗文本 🔗
<em> 斜体 🔗
<abbr> 指定单词的缩写，使用该元素文本出现虚线下划线，鼠标移动上去会有提示信息 🔗
<kbd> 接收键盘输入指令: CTRL + P 🔗
<hr> 水平线 🔗
<code> 代码片段 🔗
<ul> 无序列表 🔗
<ol> 有序列表 🔗
<dl> 描述性列表 🔗

2.2 文本对齐

  • 使用 CSS 类来修改文本的对齐方式：
类 描述 备注 🔗
.text-left 左对齐文本 🔗
.text-right 右对齐文本 🔗
.text-center 居中 🔗
.text-justify 两端对齐 🔗

2.3 不同尺寸屏幕的对齐

  • 使用 CSS 类来修改文本的不同尺寸屏幕的对齐方式：
类 描述 备注 🔗
左对齐
.small-text-left 所有尺寸屏幕左对齐 🔗
.small-only-text-left 小尺寸屏幕左对齐(宽度小于 40em ) 🔗
.medium-text-left 宽度大于 40.0625em 尺寸屏幕左对齐 🔗
.medium-only-text-left 宽度在 40.0625em 到 64em 尺寸的屏幕左对齐 🔗
.large-text-left 宽度大于 64.0625em 尺寸屏幕左对齐 🔗
.large-only-text-left 宽度在 64.0625em 到 90em 尺寸的屏幕左对齐 🔗
.xlarge-text-left 宽度大于 90.0625em 尺寸屏幕左对齐 🔗
.xlarge-only-text-left 宽度在 90.0625em 到 120em 尺寸的屏幕左对齐 🔗
.xxlarge-text-left 宽度大于 120em 尺寸屏幕左对齐 🔗
右对齐
.small-text-right 所有尺寸屏幕右对齐 🔗
.small-only-text-right 小尺寸屏幕右对齐(宽度小于 40em ) 🔗
.medium-text-right 宽度大于 40.0625em 尺寸屏幕右对齐 🔗
.medium-only-text-right 宽度在 40.0625em 到 64em 尺寸的屏幕右对齐 🔗
.large-text-right 宽度大于 64.0625em 尺寸屏幕右对齐 🔗
.large-only-text-right 宽度在 64.0625em 到 90em 尺寸的屏幕右对齐 🔗
.xlarge-text-right 宽度大于 90.0625em 尺寸屏幕右对齐 🔗
.xlarge-only-text-right 宽度在 90.0625em 到 120em 尺寸的屏幕右对齐 🔗
.xxlarge-text-right 宽度大于 120em 尺寸屏幕右对齐 🔗
居中对齐
.small-text-center 所有尺寸屏幕居中对齐 🔗
.small-only-text-center 小尺寸屏幕居中对齐(宽度小于 40em ) 🔗
.medium-text-center 宽度大于 40.0625em 尺寸屏幕居中对齐 🔗
.medium-only-text-center 宽度在 40.0625em 到 64em 尺寸的屏幕居中对齐 🔗
.large-text-center 宽度大于 64.0625em 尺寸屏幕居中对齐 🔗
.large-only-text-center 宽度在 64.0625em 到 90em 尺寸的屏幕居中对齐 🔗
.xlarge-text-center 宽度大于 90.0625em 尺寸屏幕居中对齐 🔗
.xlarge-only-text-center 宽度在 90.0625em 到 120em 尺寸的屏幕居中对齐 🔗
.xxlarge-text-center 宽度大于 120em 尺寸屏幕居中对齐 🔗
两端对齐
.small-text-justify 所有尺寸屏幕都两端对齐 🔗
.small-only-text-justify 小尺寸屏幕两端对齐(宽度小于 40em ) 🔗
.medium-text-justify 宽度大于 40.0625em 尺寸屏幕两端对齐 🔗
.medium-only-text-justify 宽度在 40.0625em 到 64em 尺寸的屏幕两端对齐 🔗
.large-text-justify 宽度大于 64.0625em 尺寸屏幕两端对齐 🔗
.large-only-text-justify 宽度在 64.0625em 到 90em 尺寸的屏幕两端对齐 🔗
.xlarge-text-justify 宽度大于 90.0625em 尺寸屏幕两端对齐 🔗
.xlarge-only-text-justify 宽度在 90.0625em 到 120em 尺寸的屏幕两端对齐 🔗
.xxlarge-text-justify 宽度大于 120em 尺寸屏幕两端对齐 🔗

2.4 其他

类 描述 备注 🔗
.left 元素向左浮动 🔗
.right 元素向右浮动 🔗
.clearfix 清除浮动 - 必须添加在浮动元素的父元素上
.hide 隐藏元素 (CSS display: none;) 🔗
.list-inline 将所有元素设置在同一行 🔗
.lead 让 <p> 元素更突出 🔗
.subheader 设置浅色的 <h1> - <h6> 元素 🔗

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-12 20:02


评论


文章目录
  1. 1. 前言
  2. 2. 1、CSS 可见性
    1. 2.1. 1.1 根据屏幕尺寸显示元素
    2. 2.2. 1.2 根据屏幕尺寸隐藏元素
    3. 2.3. 1.3 根据屏幕方向显示元素
    4. 2.4. 1.4 触屏设备的显示与隐藏
  3. 3. 2、CSS 参考手册
    1. 3.1. 2.1 文本
    2. 3.2. 2.2 文本对齐
    3. 3.3. 2.3 不同尺寸屏幕的对齐
    4. 3.4. 2.4 其他
隐藏目录