/* core.css v1.1 | MIT License | corecss.io */
html {
font-family: sans-serif;
font-size: 100%;
line-height:;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, header, footer, main, section, div,
h1, h2, h3, h4, h5, h6, p, span, a,
blockquote, q, pre, code, ol, ul, li,
form, label, input, textarea, button,
table, tr, th, td, dl, dt, dd, hr {
margin:;
padding:;
border:;
font: inherit;
font-size: 100%;
line-height: inherit;
vertical-align: baseline;
background: transparent;
}
article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
display: block;
}
ol, ul {
list-style: none;
}
hr {
border-bottom: 1px solid #000;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border-style: none;
}
a, a:hover {
color: #000;
text-decoration: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
[type='color'],
[type='date'],
[type='datetime-local'],
[type='email'],
[type='month'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='text'],
[type='time'],
[type='url'],
[type='week'],
textarea {
display: block;
width: 100%;
max-width: 100%;
border: 1px solid #000;
border-radius:;
-webkit-appearance: none;
-moz-appearance: none;
}
::-webkit-input-placeholder {color: #777;}
:-moz-placeholder {color: #777;}
::-moz-placeholder {color: #777; opacity:;}
:-ms-input-placeholder {color: #777;}
[type='reset'],
[type='submit'],
[type='button'],
button {
border: 1px solid #000;
border-radius:;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
:focus {
outline: none;
}
table {
width: 100%;
}
table, tr, th, td {
border: 1px solid #000;
border-collapse: collapse;
border-spacing:;
}
.row {margin: 0 auto;}
.row:before, .row:after {content: ''; display: table;}
.row:after {clear: both;}
.xs {max-width: 32rem;}
.sm {max-width: 48rem;}
.md {max-width: 64rem;}
.lg {max-width: 80rem;}
.xl {max-width: 96rem;}
.col {float: left;}
.xs-0 {display: none;}
.xs-1, .xs-2, .xs-3, .xs-4, .xs-5, .xs-6, .xs-7, .xs-8, .xs-9, .xs-10, .xs-11, .xs-12 {display: inline-block;}
.xs-1 {width: 8.3333%;}
.xs-2 {width: 16.6667%;}
.xs-3 {width: 25%;}
.xs-4 {width: 33.3333%;}
.xs-5 {width: 41.6667%;}
.xs-6 {width: 50%;}
.xs-7 {width: 58.3333%;}
.xs-8 {width: 66.6667%;}
.xs-9 {width: 75%;}
.xs-10 {width: 83.3333%;}
.xs-11 {width: 91.6667%;}
.xs-12 {width: 100%;}
@media screen and (min-width: 32em) {
.sm-0 {display: none;}
.sm-1, .sm-2, .sm-3, .sm-4, .sm-5, .sm-6, .sm-7, .sm-8, .sm-9, .sm-10, .sm-11, .sm-12 {display: inline-block;}
.sm-1 {width: 8.3333%;}
.sm-2 {width: 16.6667%;}
.sm-3 {width: 25%;}
.sm-4 {width: 33.3333%;}
.sm-5 {width: 41.6667%;}
.sm-6 {width: 50%;}
.sm-7 {width: 58.3333%;}
.sm-8 {width: 66.6667%;}
.sm-9 {width: 75%;}
.sm-10 {width: 83.3333%;}
.sm-11 {width: 91.6667%;}
.sm-12 {width: 100%;}
}
@media screen and (min-width: 48em) {
.md-0 {display: none;}
.md-1, .md-2, .md-3, .md-4, .md-5, .md-6, .md-7, .md-8, .md-9, .md-10, .md-11, .md-12 {display: inline-block;}
.md-1 {width: 8.3333%;}
.md-2 {width: 16.6667%;}
.md-3 {width: 25%;}
.md-4 {width: 33.3333%;}
.md-5 {width: 41.6667%;}
.md-6 {width: 50%;}
.md-7 {width: 58.3333%;}
.md-8 {width: 66.6667%;}
.md-9 {width: 75%;}
.md-10 {width: 83.3333%;}
.md-11 {width: 91.6667%;}
.md-12 {width: 100%;}
}
@media screen and (min-width: 64em) {
.lg-0 {display: none;}
.lg-1, .lg-2, .lg-3, .lg-4, .lg-5, .lg-6, .lg-7, .lg-8, .lg-9, .lg-10, .lg-11, .lg-12 {display: inline-block;}
.lg-1 {width: 8.3333%;}
.lg-2 {width: 16.6667%;}
.lg-3 {width: 25%;}
.lg-4 {width: 33.3333%;}
.lg-5 {width: 41.6667%;}
.lg-6 {width: 50%;}
.lg-7 {width: 58.3333%;}
.lg-8 {width: 66.6667%;}
.lg-9 {width: 75%;}
.lg-10 {width: 83.3333%;}
.lg-11 {width: 91.6667%;}
.lg-12 {width: 100%;}
}
@media screen and (min-width: 80em) {
.xl-0 {display: none;}
.xl-1, .xl-2, .xl-3, .xl-4, .xl-5, .xl-6, .xl-7, .xl-8, .xl-9, .xl-10, .xl-11, .xl-12 {display: inline-block;}
.xl-1 {width: 8.3333%;}
.xl-2 {width: 16.6667%;}
.xl-3 {width: 25%;}
.xl-4 {width: 33.3333%;}
.xl-5 {width: 41.6667%;}
.xl-6 {width: 50%;}
.xl-7 {width: 58.3333%;}
.xl-8 {width: 66.6667%;}
.xl-9 {width: 75%;}
.xl-10 {width: 83.3333%;}
.xl-11 {width: 91.6667%;}
.xl-12 {width: 100%;}
}

响应式网站通用css的更多相关文章

  1. 使用Quasar设计Material和IOS风格的响应式网站

    使用Quasar设计Material和IOS风格的响应式网站 栏目: CSS · 发布时间: 8个月前 来源: segmentfault.com   本文转载自:https://segmentfaul ...

  2. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  3. css媒体查询:响应式网站

    css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...

  4. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  5. 响应式网站css reset

    响应式网站 css reset /* core.css v1.1 | MIT License | corecss.io */ html { font-family: sans-serif; font- ...

  6. Skeljs – 用于构建响应式网站的前端开发框架

    skelJS 是一个轻量级的前端框架,用于构建响应式站点和应用程序.让设计人员和开发人员可能够使用四个强大的组件:CSS 网格系统,响应式处理程序,CSS 的快捷方式和插件系统. 您可能感兴趣的相关文 ...

  7. IE浏览器支持响应式网站设计

    目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的 ...

  8. 使用Bootstrap 3开发响应式网站实践07,页脚

    页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="r ...

  9. 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

    □ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...

随机推荐

  1. 06_Java多线程、线程间通信

    1. 线程的概念      1.1多进程与多线程 进程:一个正在执行的程序.每个进程执行都有一个执行顺序,该顺序是一个执行路径,或叫一个控制单元. 一个进程至少有一个线程. 线程:就是进程中的一个独立 ...

  2. 链表 UVA 11988 Broken Keyboard (a.k.a. Beiju Text)

    题目传送门 题意:训练指南P244 分析:链表模拟,维护链表的head和tail指针 #include <bits/stdc++.h> using namespace std; const ...

  3. jenkins+ant+jmeter搭建持续集成的接口测试平台

    一.jemter接口脚本的编写步骤如下: 1. 编写接口请求 通过录制或者查看接口文档,编写接口请求,进行调试,确保接口调试通过,对于http的请求来说,就是正确的填写域名,查询字符串,查询参数等信息 ...

  4. AngularJS学习笔记之directive—scope选项与绑定策略

    From:http://www.linuxidc.com/Linux/2015-05/116924.htm scope:{}使指令与外界隔离开来,使其模板(template)处于non-inherit ...

  5. BZOJ2002 & LCT模板(分块不会搞)

    题意: 看题. 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿 着一条直线摆上n个装置,每个装置设定初 ...

  6. HDU 3078 (LCA+树链第K大)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3078 题目大意:定点修改.查询树中任意一条树链上,第K大值. 解题思路: 先用离线Tarjan把每个 ...

  7. UIColletionView 的属性与常用方法介绍

    UICollectionView基础   初始化部分: UICollectionViewFlowLayout *flowLayout= [[UICollectionViewFlowLayout all ...

  8. NOI模拟赛Day4

    看到成绩的时候我的内心** woc第一题写错了呵呵呵呵呵呵呵呵 人不能太浪,会遭报应的** ------------------------------------------------------ ...

  9. 在 Excel 工作簿中定义决策表(Oracle Policy Modeling-Define decision tables in Excel workbooks)

    要在 Excel 中编写规则,您只需在表中编写规则,并使用 Oracle Policy Modeling 样式标识单元格中的信息类型, 以便这些规则可以编译并在 Oracle Determinatio ...

  10. SDL 五子棋游戏

    http://www.jb51.net/article/79271.htm 1.定义窗口大小,棋盘大小 SDL_GetWindowSize()读取窗口大小, 由于棋盘是15*15格局,上下留白一行,在 ...