1.0.3 • Published 5 years ago

u-response.css v1.0.3

Weekly downloads
2
License
ISC
Repository
github
Last release
5 years ago

u-response.css

This is a responsive layout Library.

npm version npm downloads

安装(Install)

npm install --save u-response.css

下载(Download)

https://unpkg.com/u-response.css

Less2Css

$ npm start
//lessc u-response.less u-response.css

文件列表(Files)

u-response.css   # 生成css文件
u-response.less  # 响应式核心
u-var.less       # 定义参数

使用(Use)

<link rel="stylesheet" href="u-response.css">

布局容器

# .container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
  ...
</div>

# .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid">
  ...
</div>

栅格

栅格用于通过一系列的行(row)与列(column)的组合来创建页面布局.

类名描述
.col-xs-1 ~ .col-xs-12手机设备(768 > screen )
.col-sm-1 ~ .col-sm-12平板设备(768 < screen < 970)
.col-md-1 ~ .col-md-12PC小屏 (970 < screen < 1200)
.col-lg-1 ~ .col-lg-12PC大屏 (1200 < screen )
.col-xs-offset-1 ~ .col-xs-offset-12手机设备列偏移
.col-sm-offset-1 ~ .col-sm-offset-12平板设备列偏移
.col-md-offset-1 ~ .col-md-offset-12PC小屏列偏移
.col-lg-offset-1 ~ .col-lg-offset-12PC大屏列偏移
.col-xs-push-1 ~ .col-xs-push-12手机设备列右偏移
.col-sm-push-1 ~ .col-sm-push-12平板设备列右偏移
.col-md-push-1 ~ .col-md-push-12PC小屏列右偏移
.col-lg-push-1 ~ .col-lg-push-12PC大屏列右偏移
.col-xs-pull-1 ~ .col-xs-pull-12手机设备列左偏移
.col-sm-pull-1 ~ .col-sm-pull-12平板设备列左偏移
.col-md-pull-1 ~ .col-md-pull-12PC小屏列左偏移
.col-lg-pull-1 ~ .col-lg-pull-12PC大屏列左偏移
.hidden-xs手机设备隐藏指定列
.hidden-sm平板设备隐藏指定列
.hidden-mdPC小屏隐藏指定列
.hidden-lgPC大屏隐藏指定列

示例

# 12列
<div class="container">
	<div class="row">
	  <div class="col-md-1">.col-md-1</div>
	  <div class="col-md-1">.col-md-1</div>
	  <div class="col-md-1">.col-md-1</div>
	  <div class="col-md-1">.col-md-1</div>
	  <div class="col-md-1">.col-md-1</div>
	  <div class="col-md-1">.col-md-1</div>
	  <div class="col-md-1">.col-md-1</div>
	  <div class="col-md-1">.col-md-1</div>
	  <div class="col-md-1">.col-md-1</div>
	  <div class="col-md-1">.col-md-1</div>
	  <div class="col-md-1">.col-md-1</div>
	  <div class="col-md-1">.col-md-1</div>
	</div>
</div>

# 2列
<div class="container">
	<div class="row">
		<div class="col-md-4">.col-md-4</div>
		<div class="col-md-8">.col-md-8</div>
	</div>
	<div class="row">
		<div class="col-md-6">.col-md-6</div>
		<div class="col-md-6">.col-md-6</div>
	</div>
</div>

# 3列
<div class="container">
	<div class="row">
		<div class="col-md-4">.col-md-4</div>
		<div class="col-md-4">.col-md-4</div>
		<div class="col-md-4">.col-md-4</div>
	</div>
</div>

# 多种设备
<div class="row">
	<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
	<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
	<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
	<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
	<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

浏览器支持情况(Browser support)

ChromeFirefoxSafariOperaEdgeIE
Latest √Latest √Latest √Latest √Latest √8+ √