移动端总结

1.head部分添加icon图片

 

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

 

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

 

@media(max-767px){

 

}

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

 

}

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

 

}

@media(min-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>