优点
- 减少工作量
- 节省时间
- 每个设备都能得到正确的设计
- 搜索优化
缺点
- 加载更多的样式和脚本资源
- 设计比较难精确定位和控制
- 老版本浏览器兼容性不好
媒体查询
** css3 **
@media all and (min-width:800px) and (orientation:landscape){
...
} ```
> and
> or
> not
> only(不支持老浏览器时使用)
### 最常用的属性
- width 视口宽带
- height 视口高度
- device-width 设备屏幕的宽度
- device-height 设备屏幕的高度
***
# viewpoint视口
<meta name="viewpoint" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>```
网站开发前的工作
1.需求调研
2.UI设计、评审
3.原型设计
** 怎么分析设计图 **
- 和设计师交流网站如何交互
- 是否有相应的设计规范（字体 颜色 字号 间距等）
- 什么地方必须100%还原？什么地方可以灵活处理？
** 分析设计图步骤 **
1.分析结构 - 什么地方可以变？什么地方不变?
- 拆分结构
2.分析布局 - 用什么元素？
3.切图
响应式网站设计实践原则
-
渐进增强
-
优雅降级（流行）
-
小屏幕
-
大屏幕（按照用户数量）
** 浏览器 **
- pc
1.chrome
2.火狐
3.ie - 移动端
1.系统自带
2.ios浏览器
3.qq浏览器
4.uc
5.360
** 断点的选择 **（按照设计师）
0-480 小屏幕
480-800 中屏幕
801-1400 大屏幕
1400+ 巨屏幕
如何组织项目目录结构
- 约定优于配置
- 约定代码结构或命名规范来减少配置数量
- 没有最好的组织方式，只有最合适的
Paste_Image.png
JBZ4FZ$GSL1[2%P]RQJY`H4.png
比特虫 在线制作favicon.ico图标(网站的logo)
humans.txt 开发人员信息，格式
编写html代码
Paste_Image.png
Paste_Image.png
编写css代码
**使用normalize.css 重置样式
css单位
- px 像素
- em 相对的长度单位
1.em相对参照物为父元素的font-size
2.em具有继承的特点
3.当没有设置font-size时，浏览器会有一个默认的em设置：1em=16px
缺点：容易混乱 - rem
1.rem的相对参照物为根元素的html，相对于参照物固定不变，所以比较好计算
2.当html没有设置font-size时，浏览器会有一个默认的rem设置：1rem=16px，这点和em是一致的
缺点：ie8 以下不支持，可以在rem前再设置一个font-size
font-size:100% 1rem=16px
font-size:62.5% 1rem=10px (10/16*100%)
CanIUse 检查兼容性
autoprefixer 自动给css添加兼容性前缀
实现轮播图特效
Paste_Image.png
Paste_Image.png
owlcarousel owlcarousel轮播插件
响应式图片
-
js或服务端
Paste_Image.png
-
srcset
Paste_Image.png
坑：要配合sizes属性，默认sizes是100vw（容器宽度要和sizes一样大，才能准确显示图片大小）
Paste_Image.png
-
srcset配合sizes
Paste_Image.png
- picture(兼容性 ie 老版本浏览器都不支持，不过可以用polyfill【腻子】)
Paste_Image.png
Paste_Image.png
判断是否支持webp格式的图片
picturefill
picturefill
- svg（兼容性好）
缺点：色彩不丰富，只能用于颜色单一的小图标
editor.method
iconMoon
在线创建svg图形
压缩图片
压缩图片
Node.js
服务器端也可以运行js代码
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 (回调函数、异步执行)
Node.js 的包管理器 npm，是全球最大的开源库生态系统。
- npm install jquery (安装命令、包名用小写的)
- npm init (package.json 依赖信息、团队统一)
- npm install（根据package.json安装）
1.npm i (简写)
2.npm install -g(全局安装)
3.npm install xxx --save（更新生产环境依赖）
4.npm install xxx --save -dev（更新开发环境依赖） - npm uninstall xxx（卸载）
- npm updata xxx（更新）
node.js轻量级服务器
http-server
http-server
如何处理兼容性
-
ie(虚拟机)
-
chrome
-
火狐
-
safiry
-
安卓
-
苹果
1.虚拟机（genymotion安卓虚拟器）
2.真机
css兼容性解决方案
- hack
1.browserhack.com 可以看到各种hack的写法 - pollyfill
- shiv
1.html5shiv(html5标签) https://github.com/aFarkas/html5shiv
2 Respond(媒体查询) https://github.com/scottjehl/Respond -
modernizr.com
1.一个库、可以自定义
2.用于检测css3、html5的兼容性
3.主动式兼容、防御式兼容
4.html标签上会自动添加类
Paste_Image.png
- caniuse.com
在多个设备上进行测试
Paste_Image.png
打包发布
在发布之前的代码优化
1.压缩（手动的网站）
2.合并
3.增加版本号
node.js 自动打包工具
1.Grunt--自动化构建工具
2.Glup--自动化构建工具（推荐）
Paste_Image.png
3.Webpack --静态资源打包工具
网友评论