html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome= 1" />
<meta name="renderer" content="webkit" />
<meta name="renderer" content="ie-stand" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
</head>
<body>
</body>
</html>
媒體查詢
<style>
/* 普通兩種規格 */
@mediaonlyscreenand(max-width:768px) {
/*手機尺寸*/
}
@mediaonlyscreenand(min-width:769px) {
/*平板，PC尺寸*/
}
/* 特殊要求4種規格 */
@mediaonlyscreenand(max-width:768px) {
/*手機尺寸*/
}
@mediaonlyscreenand(min-width:769px)and(max-width:992px) {
/*平板尺寸*/
}
@mediaonlyscreenand(min-width:993px)and(max-width:1200p x) {
/*中屏幕電腦*/
}
@mediaonlyscreenand(min-width:1200px) {
/*大屏幕電腦*/
}
</style>
rem佈局
<script>
window.onload = window.onresize = function () {
/*750代表設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100
代表換算比例，這裏寫100是爲了以後好算,比如，你測量的一個寬度是100px,
就可以寫爲1rem,以及1px=0.01rem等等*/
getRem(750, 100)
};
functiongetRem(pwidth, prem) {
varhtml = document.getElementsByTagName("html")[0];
varoWidth = document.body.clientWidth || document.documen
tElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
初始化樣式表
@charset "UTF-8";
/* ==========================================================================
Component: Base Revision by SdL0610
============================================================================ */
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Set <html> and <body> to inherit the height of the viewport */
html,body {
min-height: 100%;
}
/* Prevent iOS text size adjust after orientation change,without disabling user zoom. */
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: none;
}
/* Remove default margin. */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin: 0;
padding: 0;
list-style: none;
line-height: 1.5em;
}
/* HTML5 display definitions */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,main,nav,section,summary,iframe {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome,Firefox,and Opera.
*/
audio,canvas,progress,video {
display: inline-block;
vertical-align: baseline;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11,Safari,and Firefox < 22.
*/
[hidden],template,script {
display: none;
}
/* Links
========================================================================== */
/* Remove the gray background color from active links in IE 10. */
a {
background-color: transparent;
}
/* Address `outline` inconsistency between Chrome and other browsers. */
/* a:focus {
outline: thin dotted;
} */
/* Improve readability when focused and also mouse hovered in all browsers. */
a:active,a:hover {
outline: none;
transition: all 0.2s ease-out 0s;
}
/* Text-level semantics
========================================================================== */
/* Remove text-decoration */
ins,a {
text-decoration: none;
}
/* Address style set to `bolder` in Firefox 4+,Safari 5,and Chrome. */
b,strong {
font-weight: bold;
}
/* Improve readability of pre-formatted text in all browsers. */
pre {
white-space: pre-wrap;
}
/* Address inconsistent and variable font size in all browsers. */
small {
font-size: 80%;
}
/* Embedded content
========================================================================== */
/**
* 1. Corrects max-width behavior (2.) if padding and border are used
* 2. Responsiveness: Sets a maxium width relative to the parent and auto scales the height
* 3. Remove the gap between images and the bottom of their containers
* 4. Remove border when inside `a` element in IE 8/9.
*/
img {
box-sizing: border-box;
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
/* Correct overflow displayed oddly in IE 9. */
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 0;
}
/* Forms
========================================================================== */
/**
* Define consistent border,margin,and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
padding: 0;
}
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+,Safari 5,and Chrome.
*/
button,input,optgroup,select,textarea {
color: inherit;
font: inherit;
margin: 0;
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox,IE 8/9/10/11,and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,select {
text-transform: none;
}
button,html input[type="button"],input[type="reset"],input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
input[type="radio"],input[type="checkbox"] {
cursor: pointer;
padding: 0;
box-sizing: border-box;
}
/* Re-set default cursor for disabled elements. */
button[disabled],html input[disabled] {
cursor: default;
}
/* Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner,input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`,it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
/* Remove inner padding and search cancel button in Safari 5 and Chrome on OS X. */
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */
resize: vertical;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,th {
padding: 0;
}
/***********附表 css 3 或css 特效 考慮到兼容性，不做推薦==============================
**/
/**陰影顯示**/
.dob-shadow {
-webkit-box-shadow: 3px 3px 3px;
-moz-box-shadow: 3px 3px 3px;
box-shadow: 3px 3px 3px;
}
/**透明度顯示**/
.dob-alpha {
filter: alpha(opacity=50);
/*IE濾鏡，透明度50%*/
-moz-opacity: 0.5;
/*Firefox私有，透明度50%*/
-khtml-opacity: 0.5;
opacity: 0.5;
/*其他，透明度50%*/
}
/**css 控制字數/加省略號**/
/*.{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}*/
/**css 強制換行**/
/*.{
word-wrap:break-word;
}*/
/*其他css 使用備註
1. 針對所有ie的寫法：
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
< ![endif]-->
2. 自適應css寫法：
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
} /* css 註釋說明：設置了瀏覽器寬度不小於1201px時 abc 顯示1200px寬度 */
/*
@media screen and (max-width: 1200px) {
.abc {width: 900px}
} /* 設置了瀏覽器寬度不大於1200px時 abc 顯示900px寬度 */
/*
@media screen and (max-width: 900px) {
.abc {width: 200px;}
} /* 設置了瀏覽器寬度不大於900px時 abc 顯示200px寬度 */
/*
未完暫定
*/