**响应式网站一招致胜 学习心得**
代码改变世界
quick start
ethan marcotte
浏览器市场占有率统计
caniuse https://caniuse.com/
工具测试canius支持度： https://www.jianshu.com/p/61ab19b627a1
statecounter http://gs.statcounter.com/
媒体查询
css2开始 media媒体查询出现
<link rel="stylesheet" type="text/css" href="xxx.css" media="screen">
css3增强媒体查询
媒体类型
函数
@media all and ( min-800px) and (orientation:landscape){
...
}
-
all 可省略（默认）
-
screen
-
print
-
and
-
or | ，
-
not
-
only 老的设备上不识别就带上
css 媒体属性介绍
-
width 视口宽度
-
height 视口高度
-
device-width 渲染表面宽度 就是设备屏幕宽度
-
device-height 渲染表面高度 就是设备屏幕高度
以上属性都可以添加
min-max-前缀 -
orientation 设备处于横向还是纵向
-
aspect-ratio 基于视口的宽高比
-
device-aspect-ratio 渲染表面的宽度 就是设备屏幕宽度
-
color 每种颜色的位数 bits 。 min-color ：16位，8位
-
resolution 检测屏幕|打印机分辨率
viewport 3种视口
-
布局视口 960px
-
可视视口 设备宽度
-
理想视口 把布局视口等于可是视口就是理想视口
开发一个网站准备
思考：
- 解决什么？
- 受众是谁？
- 如何呈现？
- 如何组织？
前期step：
- 需求分析
- 原型设计
- UI设计
开发页面
- html5 不区分大小写 单双引号
<!doctype html>
- head中编码 utf-8
- IE兼容性：
-
IE能识别的脚本:
<!--[if lte IE8]> <p>你的浏览器太老了，请 <a href="https://browsehappy.com/">更新</a></p> <![endif]--> -
不同浏览器下载地址
-
html 大纲生成页面
http://gsnedders.html5.org/outliner/
-
UI页面结构书写
分析设计图 写出页面结构
顺便添加class属性名， 为后续class样式做准备
注意类似递归的方式去写结构
大到小外到内 -
重置样式
reset.cssnormalize.csshttp://necolas.github.io/normalize.css/
这里我们现在都一般直接使用normalize.css
在此基础上进行一些覆盖
-
px em rem 单位
设置 rem 相对好些
html {font-size: 62.5%}后 1rem = 10px注意：rem有兼容问题
gte IE8 -
清除浮动
作用： float后父级元素高度塌陷（没了高度为0），设置这个清楚浮动，高度可以回来（即 撑起来高度）
只要是触发了BFC后，都可以清除浮动。
触发BFC可以动过一下几个属性：
- float:
- overflow:auto;
- overflow:hidden;
- display:table-cell ;
- display: table-...
- position : fixed;
- postion: absolute;
经典清除使用伪代码方式：
.clearFix:before,
.clearFix:after{
content:' ’;
clear:both;
display:block;
height:0;
overflow:hidden
}
clearFix{
zoom:1;
}
也可以简写成如下：
.clearFix:before,
.clearFix:after{
content:' ’;
display:table;
}
.clearFix:after{
clear:both;
}
clearFix{
zoom:1;
}
-
flex 替代 float
display:flex 替代 float -
2018 front-end趋势
https://frontendmasters.com/books/front-end-handbook/2018/
-
兼容的前缀自动添加
-
精灵图 sprit， 设置小图背景
好处是请求一次就拿到一张图 然后再根据background-position进行定位 设置宽度|高度
-
background-image -
background-position -
widht | height -
background-size
-
-
li 浮动后的几个li间距问题修正
- 父元素font-size:0
- margin-left：-3px
-
行级标签宽度设置
display:inner-block; 10%; color:red; font-size:1rem; line-height:1.5; padding:0.5rem; text-aling:center; -
text文本超出截断
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
-
计算函数calc
calc(33.33333% - 1rem); -
.item
+.item 兄弟元素.feature .item + .item { margin-left: 1.5rem; }+比如li中是否包含.item的兄弟元素这种方式一般都是设置除第一个外的其他兄弟元素
-
滤镜 filter
对背景颜色进行滤镜
background: url('../img/logo@1x.png') no-repeat left; -webkit-filter: grayscale(100%); filter: grayscale(100%); -
rgba 透明度
background: rgba(0,0,0,0.6)
对背景颜色进行opacity透明度控制 不对字体影响
若字体也有透明度 要用
color:#000;opactiy: 0.6