前端页面初始化代码-优快云博客

<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />复制代码

width 设置viewport宽度，为一个正整数，或字符串‘device-width’
height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
initial-scale 默认缩放比例，为一个数字，可以带小数
minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
user-scalable 是否允许手动缩放

css3的calc()函数计算屏幕分辨率,以iphone6的375px屏幕宽度为基准,定义全局rem单位的值,兼容性如下

<style type="text/css">
html{
    font-size: calc(100vw/3.75);
}
body{
    font-size: 16px;
}
/*媒体查询：如果文档宽度小于1500像素*/
@media screen and (max-width:1500px){}
</style>复制代码

<!-- pc端初始化 -->
<style type="text/css">
    blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
        margin: 0;
        padding: 0;
    }
    /*字体：字体大小12px/字体行高1.5*/
    body, button, input, select, textarea {
        font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    }
    /*这些元素本身不会继承父体的字体大小，设置了font-size:100%后就能自动继承*/
    h1, h2, h3, h4, h5, h6,button, input, select, textarea {
        font-size: 100%;
    }
    /*伪对象选择器清除浮动*/
    .clearFloat:after{
        content: "";
        display: block;
        height: 0;
        clear: both;
    }
    ol, ul {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: inherit;
    }
    /*ie被a标签包裹的img标签会有边框*/
    img {
        border: 0;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
</style>复制代码

常见设备字体：
tahoma 大河马字体
arial 是一套随同多套微软应用软件所分发的无衬线体TrueType字型
sans-serif 表示是无衬线字体，是一种通用字体
苹果丽黑字体(W3)-Hiragino Sans GB
"\5b8b\4f53″ 就是 “宋体”。用 unicode 表示，不用 SimSun, 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法。注释乱码：强烈建议不要用中文注释。font-family:’宋体’
为了方便大家好查，整理了些中文名 Unicode，特此献给其他前端开发的朋友们
新细明体 \65B0\7EC6\660E\4F53
细明体 \7EC6\660E\4F53
标楷体 \6807\6977\4F53
黑体 \9ED1\4F53
宋体 \5B8B\4F53
新宋体 \65B0\5B8B\4F53
仿宋 \4EFF\5B8B
楷体 \6977\4F53
仿宋_GB2312 \4EFF\5B8B_GB2312
楷体_GB2312 \6977\4F53_GB2312
微软正黑体 \5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1*/