学习前端的第十五天
作者：互联网
最近有大数据的实验要做，发现大数据用的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){
}
标签：media,前端,iconfont,学习,width,字体,font,第十五天,图标 来源： https://blog.csdn.net/Robergean/article/details/117668418