PC端和移动端网页的初始化样式

Posted 2020-08-24

pc端样式重置

 

*{ margin:0; padding:0;}

body{ font-size:14px; font-family:微软雅黑;font-style:normal;}

a{ text-decoration:none}

a,a:hover{  transition:background 0.5s linear;-webkit-transition:background 0.5s linear;-moz-transition:background 0.5s linear;-o-transition:background 0.5s linear;}

em, i{font-style: normal;}

ul, ol, li{list-style: none;}

img{ border:none;vertical-align:middle;}

input,select,textarea{outline:none;border:none;background:none;}

textarea{resize:none;}

p{line-height:22px;}

.fl{float: left;}

.fr{float: right;}

.clear{ clear:both; height:0px; width:100%; overflow:hidden;}

.position{position:relative;}

 

/*公共样式*/

.layout{ width:1100px; display:table; margin:0 auto;}

 

/*头部*/

 

/*导航*/

 

/*banner*/

 

/*内容*/

 

/*底部*/

 

 

 

/******************************************************************************/

 

移动端页面注意事项：

 

1.移动端样式重置

 

/* CSS Document */

*{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-family:Arial, "微软雅黑";}

img{border:none;max-width:100%;vertical-align:middle;}

body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;list-style:none;overflow-x:hidden}

h1,h2,h3,h4,h5,h6{font-size:100%;}

input,textarea{-webkit-user-select:text;-ms-user-select:text;user-select:text;-webkit-appearance:none;font-size:1em;line-height:1.5em;}

table{border-collapse:collapse;}

input,select,textarea{outline:none;border:none;background:none;}

a{outline:0;cursor:pointer;*star:expression(this.onbanner=this.blur());}

a:link,a:active{text-decoration:none;}

a:visited{text-decoration:none;}

a:hover{color:#f00;text-decoration:underline;}

a{text-decoration:none;-webkit-touch-callout:none;}

em,i{font-style:normal;}

li,ol{list-style:none;}

html{font-size:10px;}

.clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;} 

.fl{float:left;}

.fr{float:right;}

body{ margin:0 auto;max-width:640px; min-width:320px;color:#555; padding-bottom:8%;background:#fef9f1;height:100%;}

 

 

底部

@media screen and (max-width:320px){body,input,select{font-size:10px}}

@media screen and (min-width:320px){body,input,select{font-size:11.25px}}

@media screen and (min-width:400px){body,input,select{font-size:12.5px}}

@media screen and (min-width:480px){body,input,select{font-size:13.75px}}

@media screen and (min-width:560px){body,input,select{font-size:15px}}

@media screen and (min-width:600px){body,input,select{font-size:16.25px}}

@media screen and (min-width:640px){body,input,select{font-size:18px}}

 

 

2.在HTML源文件中的头部head加入：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">