首页 > 移动平台 > 详细

html Css PC 移动端 公用部分样式代码整理

时间:2018-07-20 00:54:55      阅读:272      评论:0      收藏:0      [点我收藏+]

css常用公用部分样式代码整理:

 

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,  
li, dl, dt, dd, form, a, fieldset, input, th, td  
{margin: 0; padding: 0; border: 0; outline: none;}  
ul, ol{list-style: none;}  
a{color: black;text-decoration: none;}  
a:hover {text-decoration: underline;}  
html{font-size: 10px;font-family: "Microsoft YaHei",Arial;}  

  

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。

那么12px=0.75em,10px=0.625em。为了简化font-size的换算,

需要在css中的body选择器中声明Font-size=62.5%,

这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 

也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。 

 

视口设置:

 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />

 

媒体查询

 

/*reset css*/ *,

::before,::after{

       margin:0; padding:0; 

      /*清除移动端默认的点击高亮效果*/

      -webkit-tap-highlight-color:transparent;

     /*设置以边框开始计算宽度*/

      -webkit-box-sizing:border-box; 

      box-sizing:border-box;

 }

 body

      font-size:14px;

      font-family:"Microsoft YaHei",sans-serif;/*设备默认字体*/

      color:#333;

       

a

      color:#333;

      text-decoration:none;

 }

 a:hover 

      text-decoration:none;

  }

 ul,ol {

      list-style:none;

 }

 input 

      border:none;

      outline:none; /*清除移动端默认的表单样式*/

      -webkit-appearance:none;

    

/*common css*/ 

.f_leftfloat:left; 

.f_rightfloat:right; 

.clearfix::before,.clearfix::after {

content:""; 

height:0; 

line-height:0; 

display:block; 

visibility:hidden;

clear:both; 

}

 

 

 

 

html Css PC 移动端 公用部分样式代码整理

原文:https://www.cnblogs.com/agansj/p/9339119.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!