移动端和pc端html如何设置,pc端与移动端css初始设置

CSS初始设置

/*PC端重置*/

*{

padding: 0;

margin: 0;

}

body{

font: 12px/24px Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,\\5B8B\4F53,sans-serif;

color: #333;

}

a{

color: #333;

text-decoration: none;

}

img{

border: 0;

}

ul,li{

list-style: none;

}

h1,h2,h3,h4,h5,h6{

font-weight: normal;

font-style: normal;

}

.clearfix:before,

.clearfix:after {

content: "";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {

zoom: 1;

}

meta标签初始设置

/*可不写*/

移动端初始化设置

/* meta标签*/

/* 重置样式 */

* {

-webkit-tap-highlight-color: transparent;

outline: 0;

}

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {

margin: 0;

padding: 0;

vertical-align: baseline;

}

img {

border: 0 none;

vertical-align: top;

}

i, em {

font-style: normal;

}

ol, ul {

list-style: none;

}

input, select, button, h1, h2, h3, h4, h5, h6 {

font-size: 100%;

font-family: inherit;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

a, a:visited {

text-decoration: none;

color: #333;

}

body {

margin: 0 auto;

font-size: 14px;

font-family: "Helvetica Neue", Helvetica, sans-serif;

line-height: 1.5;

color: #666;

-webkit-text-size-adjust: 100% !important;

/*-webkit-user-select: none;

user-select: none;*/

}

/* rem单位切换

---------------------------------------- */

/* html根元素大小

---------------------------------------- */

html {

font-size: 20vw; }

@media screen and (max-width: 320px) {

html {

font-size: 64px; } }

@media screen and (min-width: 540px) {

html {

font-size: 108px; } }

body {

max-width: 540px;

min-width: 320px; }

视口单位换算

/* 定义基准 750或640 等等 */

$vw_fontsize: 75;

rem = ($px / 2 / $vw_fontsize) * 1rem;