移动端总结

1.head部分添加icon图片

<link rel="Shortcut Icon" href="imgs/myicon.ico">

2.不同设备尺寸的媒体查询

@media(max-width:767px){

}

@media(min-width:768px)and(max-width:991px){

}

@media(min-width:992px)and(max-width:1199px){

}

@media(min-width:1200px){

}

3.使用服务器端字体

当客户端没有我们想要的字体样式时，依然可以使用服务器端字体，显示我们想要的字体效果

字体换行设置

word-break : normal , keep-all , break-all;

(使用浏览器默认的换行规则，允许在单词内换行，只能在半角空格或连字符处换行)

<style>

@font-face{

font-family:webfont;

/*ttf :truetype  otf:opentype*/

src:url(‘DdjaVuSansMono-BoldOblique.ttf‘)format("truetype");

font-weight:normal;

}

div{

font-family:webfont;

}

</style>

<div>使用服务器端字体</div>

客户端有某个字体时，引用情况如下

<style>

@font-face{

font-family:Arial;

src:local("Arial"),     /*引用本地的字体*/

url("NotoSansCJKsc-Thin.otf");

}

</style>

<div>引用本地字体测试</div>