学习前端的第十五天

最近有大数据的实验要做，发现大数据用的virtualbox里的虚拟机纯敲代码，那是真的累啊，双标记都得手敲，又不能复制，敲了一天人都麻了，而且过几天又要考四级，希望这次能过吧。

OK,还是重点说说今天学了些什么，今天内容不是很多，学了iconfont、服务器字体的引用以及媒体查询，大部分时间还是对移动端布局进行布局，今天写了支付宝页面，深深感受到弹性布局的方便。

一、iconfont

阿里巴巴矢量图标库的网址：https://www.iconfont.cn/

GitHub：

• 这是全球最大的程序员交流平台
• 程序员有些好的想法或者开发的软件代码都可以共享上去，全球的开发者都可以使用
• iconfont可以使用GitHub账户登录
• 由于GitHub网站的服务器是在国外，访问的时候比较慢

码云：

• 也被称作代码仓库
• 国内自己的程序员交流平台，可以理解为是中文版的GitHub
• 全部是中文的，用户基数还是比较大的

iconfont字体图标文件：

• 使用代码的形式替代以前的图片形式
• 代码执行效率比图片高，代码形式可以当做文本处理
• 下载下来的图标直接可以当成文本的形式去设置一些属性

svg格式：

• 矢量图标，当图片进行缩放的时候不会失真
• 可以采用编码的形式自己去创建图标
• 语法：xml形式，xml数据格式，也是标记语言，标记可以自定义

实际开发中使用iconfont字体图标：

• 如果UI不提供svg格式，只能自己去下载
• 只要有SVG格式的图标，直接把所有的需要用到的上传到iconfont字体图标项目中，然后下载

具体步骤：

<!--第一步：-->
<!--引入字体图标样式文件-->
<link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>

<!--第二步：-->
<!--可以用 i标记 或者 span标记 来指定iconfont-->
<span class="iconfont icon-chongzhizhongxin"></span>
<i class="iconfont icon-richscan_icon"></i>

<!--第三步：-->
<style type="text/css">
	span{
		/*将权重设为最大*/
		font-size: 66px !important;
		color: yellow;
	}
	i{
		color: orange;
		font-size: 66px !important;
	}
</style>

二、服务器字体

• 浏览器支持的字体有限，一般不支持艺术字体等等
• css里面提供了font-face可以引入外部的字体资源

例子：

<style type="text/css">
	@font-face {
		/*字体名称，可以自定义*/
		font-family:"灵动";
		src: url("font2/灵动指书手机字体.ttf");
	}
	h1{
		font-family: "灵动";
	}
</style>
		
<h1>马上到端午了，又可以吃粽子了！</h1>

效果：

注意：字体要注意版权，不要乱用有版权的字体，并且把它用到商用中

三、媒体查询

• 需求：根据不同的电脑分辨率，显示不同的网页样式，是做不到的
• 但通过媒体查询可以做到这些操作

语法：

@media all and (){}

all表示所有的媒体类型：笔记本、移动端设备、打印设备、投影、电视设备等等

only表示限定某种设备

not表示排除某种设备

and表示并且，和

()表示表达式 括号里面放置条件 具有一个判断的功能
+ 条件为真就执行 true
+ 条件为假就不执行 false

/*说明浏览器的宽度大于1000px说明条件成立，就执行以下代码 */
@media all and (min-width:1000px) {

} 

/*表示浏览器的宽度小于800px的时候执行以下代码*/
@media all and (max-width:800px) {

} 

/*
	排除条件，理解为条件以前是真现在就是假 数学上有个运算符叫做取反 
	这里相当于浏览器宽度小于1000的时候执行以下代码
*/
@media not all and (min-width:1000px) {

} 

/*表示浏览器的宽度在600——1000px的时候执行以下代码*/
@media all and (min-width:600px) and (max-width:1000px) {

} 

/*可以指定多个区间*/
@media all and (max-width:1000px) and (min-width:800px) {
	div{
		background-color: yellow;
	}
}
@media all and (max-width:799px) and (min-width:600px){
	div{
		background-color: #ccc;
	}
}
@media all and (max-width:599px) and (min-width:300px) {
	div{
		background-color: green;
	}
}

/* 竖屏 */
@media screen and (orientation:portrait) {

}

/* 横屏 */
@media screen and (orientation:landscape){

}