Core.css-轻量级的CSS reset和栅格系统

Core.css是一款轻量级的CSS框架,包含CSS reset和12栅格系统。它支持响应式布局,通过简单的类名即可实现不同屏幕尺寸下的自适应效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Core.css是一个非常小巧的CSS reset和栅格系统,如果你的项目非常小,你完全没必要使用大型的css框架如Bootstrap,你只需要不到4kb的core.css,就可以拥有css reset和栅格系统以及响应式布局。

Core.css使用了一个.row来代表容器中的行,如果给它追加最大宽度的class,则代表固定宽度的行,否则是全屏的行。.col代表着容器中的列,它将容器的宽度分成12列,也就是我们常说的12栅格系统。.xs-12代表着列宽是100%,同理,.xs-3代表列宽25%,因为它需要4个.xs-3刚好达到12栅格的100%。其他依次类推从.xs-1xs-12

<div class="row"><!-- Row with no max-width --> 
    <div class="col xs-12">XS: 100%</div> 
</div> 
<div class="row sm"><!-- Row with a 768px max-width --> 
    <div class="col xs-6">XS: 50%</div> 
    <div class="col xs-6">XS: 50%</div> 
</div>

随着屏幕的大小变换,内容区域的元素会匹配屏幕重新布局,就是我们说的自适应效果。我们在.col列中追加class类就可以实现自适应效果。如超小屏幕(xs)、超大屏幕(xl)。栅格系统首先会匹配移动手机版小屏幕,所以每个.col都需要一个class如:.xs-*,这样的话如果大屏幕的类没有设置,它就会使用这个.xs-*

<div class="row xl"> 
    <!-- Columns with a breakpoint--> 
    <div class="col xs-12 sm-6">XS: 100%, SM+: 50%</div> 
    <div class="col xs-12 sm-6">XS: 100%, SM+: 50%</div> 
</div> 
<div class="row"> 
    <!-- Columns with two breakpoints --> 
    <div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div> 
    <div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div> 
    <div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div> 
    <div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div> 
</div>

如果将.xs-*中的*设为0,如.xs-0,这样的话这个列就会隐藏,就是display: none的意思。

<div class="row"> 
    <!-- Hiding on only the smallest/largest screens --> 
    <div class="col xs-0 sm-6">Hidden only on XS screens</div> 
    <div class="col xs-6 xl-0">Hidden only on XL screens</div> 
 
    <!-- Showing on only the smallest/largest screens --> 
    <div class="col xs-4 sm-0">Visible only on XS screens</div> 
    <div class="col xs-0 xl-4">Visible only on XL screens</div> 
 
    <!-- Showing and hiding on every other screen size --> 
    <div class="col xs-5 sm-0 md-2 lg-0 xl-9">When would you need this?</div> 
</div>

如果你想设置容器的最大宽度,比如最大宽度1280px,也就是大屏幕尺寸,就可以在.row中追加.lg辅助类。以下是最大宽度的对应尺寸大小:

.xs {max-width: 32rem;} /* 512px (Extra-Small) */ 
 
.sm {max-width: 48rem;} /* 768px (Small) */ 
 
.md {max-width: 64rem;} /* 1024px (Medium) */ 
 
.lg {max-width: 80rem;} /* 1280px (Large) */ 
 
.xl {max-width: 96rem;} /* 1536px (Extra-Large) */

Core.css还提供了简单基本的css reset样式,比如margin: 0padding: 0以及box-sizing: border-box

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值