【笔记】imooc -所向披靡的响应式开发

Myth丶恋晨 2022-05-08 12:24 439阅读 0赞

### 第01章 ###

##### 1-03 响应式网站设计的概念 #####

一、响应式网站  
1、响应式网站是一个设计理念，是多项技术的综合体。  
2、设计的技术：  
（1）flexible grid layout 弹性网格布局.  
（2）flexible image 弹性图片  
（3）media queries 媒体查询

##### 1-06 媒体查询-1 #####

一、css3媒体属性  
1、width：视口宽度  
2、height：视口高度  
3、device-width:渲染表面的宽度，就是设备屏幕的宽度。  
4、device-height：渲染表面的高度，就是设备屏幕的高度。  
5、orientation：检查设备处于横向还是纵向。  
6、aspect-ratio：基于视口宽度和高度的宽高比。  
7、device-aspect-ratio：渲染表面的宽度，就是设备屏幕的宽度。  
8、color：每种颜色的位数bits，如：min-color:16位，8位。  
9、resolution：检测屏幕或打印机的分辨率，如min-resolution:300dpi  
注：以上属性都可以添加min-或max-前缀

##### 1-07 媒体查询-2 #####

一、viewport视口  
1、布局视口（layout viewport），默认宽度是960px，这样需要缩放页面；如果布局视口为理想视口，即手机宽度，则页面不需要缩放。  
2、可视视口（visual viewport），默认宽度是手机宽度  
3、理想视口（ideal viewport），理想视口就是为构建手机浏览器优化的页面添加的，添加视口标签<meta name=“viewport” content=“width=device-width”>，如果不写这句话，布局视口的宽度是厂商的默认值，如960px或980px等，如果指定该属性，布局视口成为理想视口。

### 第02章 如何组织项目目录结构 ###

##### 2-01 简述 #####

一、项目目录结构  
1、约定优于配置（convention over configuration）  
约定代码结构或命名规范以减少配置数量。

##### 2-03 有用的文件-1 #####

1、robots.txt，给搜索引擎，机器人看的。

User-agent: *
    Disallow: /admin/

2、humans.txt，保存网络建设者和其它信息  
3、404.html  
4、.editorConfig，不同编辑器中统一代码风格，早期webstorm可以在插件中下载EditorConfig，现在已经内嵌，不需再下载。

# editorconfig.org
    
    root = true
    
    [*]
    charset = utf-8 // 文件保存格式
    indent_size = tab
    tab_width = 4
    tab_style = tab
    insert_final_newline = true // true:文件以空白行结尾
    trim_trailing_whitespace = true // 去除换行行首的空白字符
    
    [*.md]
    trim_trailing_whitespace = false

5、.gitignore，不需要版本管理的文件

*.~ // mac操作系统生成的垃圾文件，默认隐藏
    .DS_Store // mac操作系统生成的垃圾文件，默认隐藏
    .idea // webstorm设置目录
    node_modules // 存放了nodejs引入的模块目录
    dist // 工具生成的文件发布目录
    // webstorm当前页面，右击,add template，使用了哪些语言，和哪些ide，勾选上，相关的垃圾文件，就会被添加到.gitignore列表中

##### 2-05 有用的文件-3（LICENSE.txt、README.md、CHANGELOG.md） #####

6、LICENSE.txt,声明或协议  
7、README.md，可以参考bootstrap  
（1）项目简介，使用方式、相关链接。  
（2）md，markdown的简写，也就是markdown文件.  
（3）webstorm的markdown编辑工具，插件下载MultiMarkDown  
（4）在线编辑markdown文件：http://dillinger.io  
8、CHANGELOG.md  
项目每个版本的更新，说明版本号、更新内容、修复了哪些问题等。

##### 2-06 有用的文件4（markdown） #####

一、webstorm新建的文件中创建html5文件模板，输入`html:5` ,然后按tab就行。

### 第03章 开始编写html文件 ###

##### 3-01 开始 #####

一、html中的lang，  
1、如果是zh-CH，支持简体中文；如果是zh，支持更广泛的中文，包括简体，繁体，方言等。  
2、如果lang是en，有些翻译软件就会进行翻译，如果是zh，则不会进行翻译。  
二、charset  
1、`meta charset = "utf-8"` 如果写在`<title>这里含中文字符</title>` 之后，在老的ie中，则会无法正确解析（①出现空白页。②出现乱码）。  
2、charset要放在页面的前1024个字节内，不然是无效的。  
三、http-equiv  
`<meta http-equiv="x-ua-compatible" content="ie=edge">` id=edge表示强制以最新的ie浏览器模式渲染页面，ie11对这个文档模式已经弃用了，ie11的支持已经比较好了。

##### 3-02 header部分及html5新增标签简介 #####

一、一般都用class定义样式，id一般用于js快速得区别和获取元素class，一般都用中横线分隔，id一般都使用驼峰命名法。  
二、必不可少的图片使用引入，可有可无的装饰性图片可以用标签的style引入。

### 第04章 如何实现pc端的样式 ###

##### 4-01 css resets #####

一、用normalize.css作为基础css  
1、resets.css  
2、normalize.css，相对于传统resets.css，保护了有价值的默认样式，不会再有大段的继承链。

##### 4-02 px,em,rem #####

一、

/**********
    * 页面样式
    * *********/
    /*========
    基本默认值
    =======*/

二、没有font-size时，浏览器有个默认的em设置：1em=16px  
三、rem参照物给根元素html  
四、ie8或者更低版本的浏览器不支持rem，兼容性方法

p{
    	font-size:16px;
    	font-size:1rem;
    }

五、鼠标选中的颜色

::selection{
    	background-color:#b3d4fc;
    	text-shadow:none;
    }

##### 4-03 清除浮动1 #####

一、部分能共用的样式  
1、样式统一

.text-center{
    	text-align:center  !important;
    }
    .hide{
    	display:none  !important;
    }
    .show{
    	display:block !important;
    }
    .invisible{
    	visibility:none
    }
    .text-hide{
    	font:0/0 a;
    	color:transparent;
    	text-shadow:none;
    	background-color:transparent;
    	border:0;
    }

2、.text-hide，有些图片显示了，但是需要解说文字让seo查到，或网页阅读器阅读，就可以用这个。

##### 4-04 清除浮动2 #####

一、flex是可以替代float的布局方式  
ie8、9支持不是很好。  
二、子元素浮动，父元素高度为0，这时就需要清除浮动。  
三、清除浮动的4种方式  
1、父元素最后增加一个标签，clear:both。会添加一个无意义的标签。

2、父元素溢出隐藏

3、给父元素也添加一个浮动,父元素浮动了，如果有父元素的父元素，也需要浮动，整个页面都建立在浮动布局的基础上。  
这个方法影响页面布局，不推荐使用。

4、css实现，原理同方法1  
（1）

.clearfix:after{
    	content: "";
    	display:block;
    	height:0；// 隐藏content元素
    	visibility:hidden; // 隐藏content元素
    	clear:both; // 清除浮动
    }
    .clearfix{ // 兼容ie6,ie7，zoom:1触发hasLayout，才能清除浮动
    	zoom:1;
    }
    <div class="clearfix">
    	<p class="float:left">内容1</p>
    	<p style="float:left">内容2</p>
    </div>

（2）优化后：*推荐使用该方法清除浮动*

.clearfix:after,.clearfix:before{
    	content:"";
    	display:table;
    }
    .clearfix:after{
    	clear:both;
    }

clearfix:before是为了防止顶部空白崩溃（即margin-top,margin-bottom的重叠）。  
四、bfc： block Formatting Context快捷格式化上下文  
1、触发bfc：（1）float。（2）overflow:除了visible之外的值。（4）display:table-cell/ table-caption/ inline-block; （5）position:fixed / absolute;

##### 4-05 页眉页脚样式 #####

一、body的line-height:一般设置成1.5。  
二、line-height:3rem在chrome中文版中并不等于line-height:30px；因为chrome中文版最小字号12px，这样3rem就等于36px;  
三、中间有边线，两边无边线：即最前面的左边没有边线，最后面的右边没有边线  
1、

header .top ul li{
    	display:inline-block;
    }
    header .top ul li + li{  /*li + li 表示第一个li元素后面紧跟着的兄弟节点的li，这样的选择器不包含列表中的第一个元素*/
    	border-left: 1px solid #999;
    	margin-left:-3px;
    }

2、margin-left:-3px如果不写，则inline-block布局的li之间会有空白，因为html页面中存在空白字符。  
2种解决方法  
（1）删除代码中的空白字符。  
（2）父元素font-size:0;  
（3）标签书写方式：

（4）li不闭合

（5）设置父边距，但是不是所有的margin-left都是-3px,方案不完美。  
（6）css4草案中的white-space-collapsing属性可以解决此问题，但是大部分浏览器不支持。  
四、css sprits把很多小图合成到大图中。

##### 4-06 主要内容样式1 #####

一、透明度  
1、background:rgba()，背景色透明，文字不透明。  
2、opacity:0.6，背景色和文字都是透明。  
3、

.item{
    	display:inline-block;
    	width:calc(33.333333333333% - 3rem); /* padding的2个rem,margin-right有2个1.5rem,每个分到1rem，所以就是2+1=3rem。如果是box-sizing:border-box，就会是- 1rem*/
    	padding:1rem;
    }
    .item + .item{
    	margin-left: 1.5rem;
    }

##### 4-07 主要内容样式2 #####

一、`content: "最新公告：\00a0\00a0"` , \\000a0表示不换行的空白字符  
二、`-webkit-filter:grayscale(100%)` ,能给图片添加一个灰色的滤镜。  
三、autoprefixer在线工具能智能增加前缀:https://autoprefixer.github.io。

### 第05章 ###

##### 5-01 响应式布局调试工具 #####

一、调试数字，按箭头键可以加1或者减1，按住shift+上下箭头，就是以10倍为单位进行改变。  
二、大屏，中屏，小屏

@media only screen and (max-width: 800)
    中屏幕：and (min-width:481px) and (max-width:800px)
    小屏幕：and (max-width:480px)

##### 5-04 css3选择器1 #####

一、@media如果用rem，会有小小的兼容性的问题，可以用em.  
二、div\[attr=“value”\], div\[attr\*=“value”\]能选到大部分\[\]选择的元素。

##### 5-05 css3选择器2 #####

一、:nth-child(2)是第二个子元素，class为test1的元素被选中  
:nth-child-of-type(2)是第二个有某种特定类型的标签子元素，class为test2的元素被选中。

##### 5-06 样式编写1 #####

一、webstorm的右键，选择split vertically，能对同一个文件进行分隔。  
二、一般手机屏幕不小于320px.

##### 5-08 样式书写3（底部导航及简述表格处理方式） #####

一、表格响应式处理方式：  
1、小屏中，隐藏某些不重要的项。  
2、纵向横向转置。  
3、表格每一项类似于表单一样的展示。

#### 5-09 打印样式 ####

一、打印  
1、去除背景色  
2、字改成黑色  
3、a链接增加下划线  
4、

@media print{
    	pre,blockquote{
    		border:1px solid #999;
    		page-break-inside: avoid; /*避免在元素内部分页：opera*/
    	}
    	h3{
    		orphans:3; /*在元素内部发生分页时，必须在页面底部保留的最少行数。标题与文字发生分页的话，如果标题下没有3行文字，标题就到下一页*/
    		windows:3; /*在元素内部发生分页时，必须在页面顶部保留的最少行数。*/
    	}
    	h3{
    }

`orphas: 3`,  
`windows: 3 /*文字发生分页时，页面底部3行*/`

### 第06章 如何实现响应式广告及响应式图片 ###

##### 6-01 如何实现响应式广告 #####

一、一个好的广告滚动组件支持  
1、支持不同的图片数量  
2、支持响应式布局  
3、具有良好的兼容性  
二、怎样挑选第三方组件  
1、使用人数  
2、是否开源：前端库一般都是开源的。  
3、文档是否齐全  
4、活跃性  
二、轮播插件  
OwlCarousel2

##### 6-04 如何实现响应式图片-概述1（js或服务端实现） #####

一、响应式图片  
1、图片的排版和布局  
2、根据设备大小加载不同的图片  
二、如何实现响应式图片  
1、js或服务端，2种方法：  
（1）js：3种480，800，1600的图片尺寸，判断后引入。  
（2）设备信息写入cookie，服务器端决定返回哪张图片。  
2、srcset

支持srcset的浏览器会根据分辨率，dpr，网速等选择最佳的图片。如果不设置size，默认按屏幕与图片100%的宽度来智能加载。  
3、srcset配合sizes  
（1）

（2）  
sizes=“100vw”, 100%的视口宽度。  
sizes=“50vw”, 50%的视口宽度。  
（3）

大于等于800的宽度的情况下，宽度是800px，其他时候是100%  
（4）

①calc里的-左右要加个空格，  
②当大于等于800px,就会按计算的宽度来显示  
4、picture

source的type有image/svg+xml, image/webp。  
picture对老的浏览器和ie浏览器不支持。  
5、svg  
（1）在线创建svn网站：①editor.method.ac。②iconmoon.io  
svg除了ie8以下浏览器不支持，其他都支持

##### 6-09 如何实现响应式图片-响应式广告具体实现 #####

一、、picturefill.js引入，能使浏览器支持picture  
二、压缩图片网站  
1、svg：iconizr.com  
2、png、jpg: tinypng.com  
三、图片代码

### 第07章 NODE.JS简介 ###

#### 7-01 Node.js简介-1 ####

1、Node.js是一个javascript运行环境，不是一个库，也不是一个框架，也不是一个js应用。  
2、之前js运行在浏览器上，现在可以运行在Node.js。  
3、Node.js是基于chrome v8引擎的javascript运行环境。  
4、chrome v8引擎独立于浏览器，因为一出生就被chrome拿来用，所以是chrome v8。可以将js代码解析成机器码。

##### 7-02 Node.js简介-2（npm 使用上） #####

一、npm下载  
1、node install jquery：前缀+命令+包名  
包名是区分大小写的，最好是使用小写。  
2、package.json：里面有依赖的信息

##### 7-03 Node.js简介-3(npm 使用下) #####

一、package.json里的依赖：  
1、“^1.7.4”: 大版本相同，其他可以不同，1.8.5，1.9.3都可以，2.7.4不行  
2、"~1.7.4"，1.7.5，1.7.8都可以，1.9.4不行  
3、"~1.7"， 1.8，1.9都可以，2.7不行  
二、安装全局包  
npm install jquery -g  
三、写入package.json  
1、写到dev-dependencies（开发环境）中：npm install jquery --save-dev  
2、写到dependencies（生产环境）中:npm install jquery --save  
3、开发环境的包在开发环境和生产环境都可以使用。  
四、卸载package.json里的应用  
1、npm uninstall jquery --save-dev  
2、npm uninstall jquery --save  
五、更新某些包  
1、npm update jquery // 更新jquery包  
2、npm update // 更新所有包  
六、i 是install的简写，安装的时候可以直接用简写。npm i jquery --save

##### 7-04 nodejs 启动server 服务 #####

一、http-server  
1、sudo npm i http-server -g  
2、http-server src  
3、 http-server src -p 8888，把端口改成8888  
二、低版本ie浏览器如果要写:端口号，则需要加上协议http://，即写成http://192.168.100:8080/ ,不能写成192.168.100:8080

### 第08章 如何处理兼容性及在多个设备上进行调试 ###

##### 8-01 如何处理兼容性-桌面端如何调试-1 #####

一、firefox的像素有进位问题，可能会导致宽度变宽。  
二、safari工具栏的开发-进入响应式设计模式，就会有各种不同的设备。  
三、测试ie:如果是mac，如果安装虚拟机，可以用parallels desktop控制中心，管理虚拟机。  
四、ie8不支持Html5标签

##### 8-02 如何处理兼容性 #####

一、IEtester测试各个版本的IE浏览器  
二、下载虚拟机：  
1、微软官网提供了很多版本的虚拟机。  
2、从 https://github.com/sdissent/ievms 下载  
三、虚拟机软件：  
1、VMWare  
2、Paralles Desktop(mac)  
3、Virtual Box(免费)

##### 8-03 如何处理兼容性-移动端如何测试 #####

一、自动化，跑测试用例。  
1、友盟指数网站，有手机用户比例。  
2、云测试：如www.testin.cn，针对app更好，html5测试没那么好。  
3、推荐的虚拟机软件：www.genymotion.net, 基于virtual box,

##### 8-04 如何处理兼容性-处理兼容性的方法 #####

一、浏览器hack写法查询。  
1、browserhacks.com,可以查询到各个浏览器hack写法  
二、浏览器兼容库  
1、https://github.com/aFarkas/html5shiv ，很多网站都会用的shiv，ie8及一下不支持html5标签，引入这个库，可以让老的浏览器兼容html5。引入方式：

原理：通过createElement来创建浏览器老版本支持的标签。  
2、https://github.com/scottjehl/Respond, 很有名的polyfill，ie6-8不支持css3的媒体查询，可以通过引入respond这个库，来支持媒体查询的min-width, max-width.  
3、https://modernizr.com， 检测程序，检测浏览器对html5,css3等的支持情况，如果支持就会添加一种类，如果不支持就添加no-同名类。  
（1）点击下载，选择需要的特性，点击build, 点击copy to clipboard。  
（2）项目新建js，把复制到的代码拷贝进去。  
（3）js的最上面引入该js文件。  
（4）样式：

.svg .logo{
    	background-image:url(xxx.svg);
    }
    .no-svg .logo{
    	background-image:url(xxx.jpg);
    }

三、查询某属性在各个浏览器上的兼容性  
1、https://caniuse.com

##### 8-05 如何在多个设备上进行调试 #####

一、浏览器同步测试工具  
1、www.browsersync.com，所有设备同步滚动，同步点击，多台设备同时测试时非常有用。  
2、安装  
sudo npm install -g browser-sync  
3、browser-sync start --server “src” --files “src/css/\*.css”, server后面的src是兼容的根目录

### 第09章 如何打包发布 ###

##### 9-01 如何打包发布-1 #####

一、压缩网站  
1、https://javascript-minifier.com  
在线压缩  
二、打包发布  
1、自动化构建工具：grunt、gulp（gulp与grunt更完善）  
2、静态资源打包工具：webpcak  
3、gulp:把每个文档当成一个流，进行流式操作。  
4、gulp安装，开发依赖项，生产环境不需要  
（1）npm init  
（2）responsiveweb  
（3)项目下就会出现一个package.json的文件，里面会有一些依赖项。  
（4)安装：sudo npm install gulp --save-dev  
（5）安装完毕后package.json里就有一个dependencies-dev里有个gulp  
（6）gulp -v  
（7）全局安装gulp后，当前项目也还需要再安装一下gulp，不然gulp可能不能正常使用。  
（8）目录下新建一个gulpfile.js文件，因为gulp所有任务，需要定义在这个文件中。  
（9）首先依赖加载项，定义一个任务，  
（10) sudo npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev  
多个任务之间用空格隔开。  
（11）gulp ，执行gulp默认任务。

##### 9-02 如何打包发布-2 #####

一、/\*! 中 的`*` 后有！就不会被压缩打包

##### 9-03 如何打包发布-3 #####

一、插件  
1、自动打包：gulp-watch插件（监听文件的改变，自动改变任务）  
2、https://github.com/contra/gulp-concat ，将多个文件合并成一个文件  
3、https://github.com/mahnunchik/gulp-responsive，生成响应式图片的插件  
4、npm输入gulp-，就能搜到gulp所有插件。  
5、模块化处理，是webpack的强项。  
6、gulp可以对前端进行优化。

### 第10章 课程扩展1-选择一个趁手的ide ###

##### 10-01 webstorm的基本操作 #####

一、webstorm  
1、ide:集成开发环境，编辑器。  
2、a\{click me\} ,自动补全文字`<a>click me</a>`  
3、lorem补全文字，  
`lorem10` 就会生成10个没有意义的单词。  
4、m10-20生成`margin:10px 20px` 。  
5、setting - emmet - css - auto insert css vendor prefixs, 相应属性后面的勾打上，能为属性自动添加前缀  
bdrs:10生成`-webkit-border-radius：10px; border-radius:10px` 等。  
6、webstorm搜索keymap，能选择eclipse, visual studio等的快捷键。  
7、在标签上按住f1，就会给出标签相应的描述。  
8、让某段标签被其他标签包裹  
①选中`<p>被包裹</p>`  
②按住command + alt + t，  
③选择surround with in html/jsp  
④输入需要的标签div，就得到`<div><p>被包裹</p></div>`  
9、command + shift + v， 双击在历史剪切板中选择文字。  
10、command + alt + enter, 在上面增加一行。  
shift + enter, 在下面增加一行。  
11、整行选择 alt + 上下箭头（aSuncat:我电脑上无效)  
12、command + shift + +或者-，能让代码全部折叠或展开  
13、alt + shift + 上下箭头，整行移动代码  
14、command + shift + m, 找到标签的开头或结尾，快速找到匹配的大括号  
15、command + alt + 左右箭头，前进或后退，回到上次光标定位的位置。  
16、command + shift + 空格，上次编辑的地方（aSuncat：无效)  
17、command + e ,上次使用的文件  
18、command + b，快速打开光标处的类或方法  
19、command + alt + b, Go to implementation(s) 跳转方法实现处  
20、css颜色选择的色块上点击，打开色轮/色板修改颜色  
21、shift + f6 标签,变量重命名，变量引用到的地方都会改变  
22、f2，定位到错误的地方（标红色下划线的地方)，alt + enter，就会出现对错误地方的修改建议。

##### 10-11 流行的响应式框架简介 #####

一、bootstrap  
foundation  
semantic UI，样式比其他的库丰富  
pureCSS  
二、使用框架的缺点  
1、体积大而重，使用起来不方便。

### 第11章 聊聊原型设计和切图 ###

##### 11-01 axure #####

一、原型设计工具  
1、axure  
2、mockup  
二、axure  
1、可以去下载axure库，安卓的material design  
2、master页面，模板页面，如果每个页面都有头尾，这时候把头尾放在master就行了。  
3、（1)可生成Html文件预览，pushlish-preview,  
（2)生成html文件，publish-generate html files  
4、动态面板，根据条件显示或者隐藏  
三、sketch（mac中)  
1、可以做原型设计，也可以做ui设计  
2、主要针对矢量图，ps主要针对位图  
四、切图  
1、ps  
（1)切图：切片- 存储为web格式

##### 11-04 交互设计 #####

一、交互设计  
1、flinto中文网，交互原型设计  
2、principleForMac.com（mac)，可以导成mp4,gif。