15、SVN的介绍和应用
15.1、SVN的介绍和应用课程概要
将代码进行集中管理，有版本号的进行迭代，方便集体工作的build流程
15.2、SVN的介绍
SVN是Subversion的简称，是一个开放源代码的版本控制系统，相较于RCS、CVS（这两个已经不流行了），它采用了分支管理系统，它的设计目标就是取代CVS。互联网上很多版本控制服务已从CVS迁移到Subversion。
TortoiseSVN是Subversion版本控制系统的一个免费开源客户端，可以超越时间的管理文件和目录。文件保存在中央版本库，除了能记住文件和目录的每次修改意外，版本库非常像普通的文件服务器。你可以将文件恢复到过去的版本，并且可以通过检查历史知道数据作了哪些修改，谁做的修改。这就是为什么许多人将Subversion和版本控制系统看做一种“时间机器”。
15.3、SVN的安装
在MAC系统里大家可以直接通过SVN命令对项目仓库进行操作，也可以下载TortoiseSVN for mac。windows上直接安装对应系统版本的TortoiseSVN即可。同时讲述了SVN背后的基本原理。
SVN原理图很容易理解，就是谁晚就要谁合并刚提交过的项目再进行提交并备份到tags，每次提交都需要保存一个tag。
15.4、SVN的使用
我们通过命令和客户端的方式才进行分支版本操作等。
在windows系统中可以使用tortoise软件对代码进行管理。
在这里就不过多做笔记了，之后学习github的时候详细记录，毕竟github是更流行的代码托管网站。
16、CSS3中的动画功能。
16.1、Transitions 功能
在 CSS3 中，Transitions 功能通过将元素的某一个属性从一个属性值指定的时间内平滑过渡到另外一个属性值来实现动画功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ /*transition: (属性) （持续时间） 变化方式*/ background-color: #ffff00; transition: background-color 1s linear; } #div1:hover{ background-color: #ff00ff; } #div2{ background-color: #ffff00; transition-property: background-color; transition-duration: 3s; transition-timing-function: linear; /*分开写的效果和合起来写的效果是一样的*/ } #div2:hover{ background-color: #ff00ff; } #div3{ background-color: #ffff00; color: #000000; width:100px; /*还可以同时写多种动画效果：*/ transition: background-color 1s linear, color 1s linear, width 1s linear; } #div3:hover{ background-color: #ff00ff; color:#ffffff; width:200px; } #div4{ background-color: #ffff00; color: #000000; width:100px; /*还可以同时写多种动画效果：*/ transition: transform 1s linear, color 1s linear, width 1s linear; } #div4:hover{ transform:rotate(360deg); color:#ffffff; width:200px; } </style> </head> <body> <div id="div1">示例文字1</div> <div id="div2">示例文字2</div> <div id="div3">多种动画</div> <div id="div4">transform效果</div> </body> </html>
16.2、Animations功能
Animations 功能与 Transitions 功能相同，但是，Animations 实现的动画效果要比 Transitions 实现的动画效果更具有客观性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: red; } /*自定义连续动画效果*/ @-webkit-keyframes mycolor{ /*开始帧*/ 0%{ background-color: red; } /*背景颜色变化帧*/ 40%{ background-color: #ffff00; } 70%{ background-color: aqua; } 100%{ background-color: red; } } div:hover{ -webkit-animation: mycolor 5s linear; } </style> </head> <body> <div>这是animation测试div</div> </body> </html>
16.3、实现动画的方法
实现动画的方法，包含，linear、ease-in、ease-out、ease、ease-in-out，使用不同的动画方法，可以让动画以不同的方式进行执行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ position:absolute; background-color:#ffff00; top:100px; width:500px; } @-webkit-keyframes mycolor { 0%{ background-color: red; transform:rotate(0deg); } 30%{ background-color: aqua; transform:rotate(30deg); } 60%{ background-color: lightskyblue; transform:rotate(-30deg); } 100%{ background-color: red; transform:rotate(0deg); } } div:hover{ -webkit-animation-name: mycolor; -webkit-animation-duration: 5s; -webkit-animation-timing-function: ease-in; } </style> </head> <body> <!--实现动画的方法： linear匀速变化 ease-in由慢到快 ease-out由快到慢 ease ease-in-out 两个都是慢--快--慢 --> <div>这是测试div</div> </body> </html>
17、老式浏览器支持HTML5和CSS
17.1、老式浏览器支持HTML5和CSS3课程概要
降级操作
17.2、老式浏览器支持HTML5
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-[if IE]> <script src="http://html5shiv.googlecode.com/sn/trunk/html5.js"></script> <!--谷歌的那个html5.js的链接好像失效了，下面这个一样是可以用的--> <script src="http://gist.githubusercontent.com/billrobbins/4608382/raw/46fbb509576823dd087e1a86e57c0efe2a8dbf6e/html5.js"></script> <!--上面这个地址的来源地址:https://gist.github.com/billrobbins/4608382--> <![endif]> </head> <body> </body> </html>
17.3、老式浏览器支持CSS3
不完全兼容方案：
参考网站（转载）：
IE中的CSS3不完全兼容方案
https://www.cnblogs.com/platero/archive/2010/08/31/1870151.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ /*编写css3的语句之后：添加如下一条语句,就可以让老式浏览器支持CSS3*/ behavior:url("ie-css3.htc"); } </style> </head> <body> <div></div> </body> </html>
18、CSS3布局属性全接触
18.1、弹性盒模型介绍
弹性盒模型也是一个代码，不过引入的代码库有点多就不在这里写了。
18.2、Flexbox 菜单项目实战
使用codepen网站可以给代码自动补充兼容性设置。
选中autoprefixed，然后viewcompiled(观看编译完成之后的代码)
我试了试效果，有点不理想，只补全了一点代码，并不完整。
下面转载一个在webstorm中安装autoprefixed插件的方法的网站
https://www.cnblogs.com/zishang91/p/7573138.html
代码（实际就是一个简单的响应式布局代码）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style> *{ padding: 0; margin: 0; border: none; } html{ font-size: 12px; } .menu{ width: 100%; border: 1px solid rgba(0,0,0,.1); display: flex; flex-direction: row; } .menu li{ list-style-type: none; text-align: center; height: 40px; line-height: 40px; flex: 1 1 100%; } .menu li:nth-child(1){ background-color: #39ADD1; } .menu li:nth-child(2){ background-color: #3079AB; } .menu li:nth-child(3){ background-color: #982551; } .menu li:nth-child(4){ background-color: #E15258; } .menu li:nth-child(5){ background-color: #CC6699; } .menu li:nth-child(6){ background-color: #52AC43; } .menu a{ text-decoration: none; color: #fff; font-size: 2rem; } @media (max- 768px) { .menu{ flex-wrap: wrap; } .menu li{ flex: 1 1 50%; } } @media (max- 480px) { .menu{ flex-direction: column; } .menu li{ flex: 1 1 100%; } } </style> </head> <body> <ul class="menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Sass</a></li> <li><a href="#">Ruby</a></li> <li><a href="#">Mongo</a></li> </ul> </body> </html>
18.3、多列属性详解
picEnd.css
*{ box-sizing: border-box; } h1{ width: 100%; height: 60px; margin: 0; line-height: 60px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.2); position: fixed; top: 0; left: 0; text-align: center; } .picC{ width: 98%; margin: 10px auto; -webkit-column-count:4; column-count:4; -webkit-column-gap: 20px; column-gap: 20px; } .picC li{ list-style-type: none; margin-top: 10px; } .pic li img{ width: 100%; /*height: auto;*/ }
picEnd.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/normalize.css"/> <link rel="stylesheet" type="text/css" href="css/picEnd.css"/> </head> <body> <h1>图片瀑布流</h1> <ul class="picC"> <li><img src="img/1.jpg" alt="" /></li> <li><img src="img/2.jpg" alt="" /></li> <li><img src="img/3.jpg" alt="" /></li> <li><img src="img/4.jpg" alt="" /></li> <li><img src="img/5.jpg" alt="" /></li> <li><img src="img/6.jpg" alt="" /></li> <li><img src="img/7.jpg" alt="" /></li> <li><img src="img/8.jpg" alt="" /></li> <li><img src="img/9.jpg" alt="" /></li> <li><img src="img/10.jpg" alt="" /></li> <li><img src="img/11.jpg" alt="" /></li> <li><img src="img/12.jpg" alt="" /></li> <li><img src="img/13.jpg" alt="" /></li> <li><img src="img/14.jpg" alt="" /></li> <li><img src="img/15.jpg" alt="" /></li> <li><img src="img/16.jpg" alt="" /></li> <li><img src="img/17.jpg" alt="" /></li> <li><img src="img/18.jpg" alt="" /></li> </ul> </body> </html>
这里附录一下简写的规则，可以百度一下sublime text快捷书写规则与方法。
textEnd.css
h1{ width: 100%; height: 60px; margin: 0; line-height: 60px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.2); position: fixed; top: 0; left: 0; text-align: center; } .textC{ width: 96%; margin: 60px auto; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; -webkit-column-rule: 1px dashed rgba(0,0,0,.3); -moz-column-rule: 1px dashed rgba(0,0,0,.3); column-rule: 1px dashed rgba(0,0,0,.3); } .textC h2,.textC h3{ font-weight: bold; color: #35B558; line-height: 2em; } .textC h4{ font-weight: bold; line-height: 2em; } .textC p{ line-height: 1.5em; margin: 10px 0; } .textC p:first-letter{ font-weight: bold; } .textC ol li{ list-style-position: inside; list-style-type: decimal; }
textEnd.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/textEnd.css"/> </head> <body> <h1>关于我们</h1> <div class="textC"> <h2>关于我们</h2> <p>极客学院IT在线教育平台隶属于北京优亿致远无线技术有限公司。</p> <p>极客学院是中国最大的IT职业在线教育平台。极客学院的理念是通过最新实战课程，帮助职业开发者系统学习Android、Cocos2d-x、iOS、HTML5、Java等高薪所需的职业开发技能。目前，超过60万专业技术开发者通过极客学院学得了更有竞争力的最新IT技能。</p> <p>2014年，中国几乎所有的热门技术及应用课程，都由极客学院首发。包括：中国第一个「Flappy Bird」课程、中国第一个「2048」的课程、中国第一个「围住神经猫」等诸多中国乃至全球首发课程。在六月份，WWDC苹果发布全新的Swift开发语言时，极客学院更是7个小时就上线了Swift的开发课程。</p> <p>创始团队写过中国大陆第一本Android开发教材，重印高达18版，是Android开发学习入门必读红宝书。同时创办了中国最大的移动开发者社区eoe(注册用户超200W)。</p> <h3>一、什么是极客</h3> <ol> <li>不满于现状，自信且不迷信权威</li> <li>保持一颗好奇心，勇敢尝试各种事情</li> <li>总是寻求更好的解决问题的方式</li> <li>不断给自己设置挑战并且努力去完美超越</li> <li>某个领域的专家并热爱分享自己的知识</li> </ol> <p>在极客学院，团队的每个人都是极客精神的继承者和实践者。</p> <h3>二、我们的价值观</h3> <ol> <li>身为极客，与众不同</li> <li>敏捷行动，快速反思，且行且调整</li> <li>不抱怨，主动改变，自适应</li> <li>以目标和结果论英雄</li> <li>永远寻找最优雅的方式解决问题</li> <li>透过数据，背后的真相</li> </ol> <p>极客学院，我们痛恨平庸和因循守旧，我们用心做每一件事，用极客精神影响和改变我们身边的人和事，并以此为目标，改变中国传统教育，释放学习能力，帮助更多人快速学会开发技术，成就每个人的职业生涯，共同去改变这个世界。</p> <h3>三、我们的使命</h3> <ol> <li>打破传统教育纸上谈兵的禁锢，直接将企业需求通过课程输入给学习者</li> <li>通过为学习者提供专业精确的职业路径图，帮助学习者快速提升开发能力</li> </ol> <h3>四、创始人故事</h3> <h4>靳岩，极客学院创始人，CEO</h4> <p>中国大陆第一本Android开发教程《Google Android开发入门与实战》作者之一，eoe联合创始人; AAMA六期学员; 北京邮电大学毕业; 擅长Android开发，正在学习iOS和W8等技术开发。移动App控，喜欢最新最简单的App，Google产品控，喜欢Google的各类产品，喜欢移动开发，喜欢看书，研究和体验各类产品。喜欢看火影，海贼王，魔兽对战录像，喜欢结交各路朋友，喝各种茶，喝各类咖啡，偶尔吟诗作词，喜欢滑雪，游泳，禅。</p> <p>他认为:</p> <ol> <li>一个人应该为了自己的理想而奋斗</li> <li>人活着只有一次，所以一定要做自己下定决心去做的事情</li> <li>失败可以原谅，但是不能原谅的是不去尝试和努力</li> </ol> <h4>姚尚朗，极客学院创始人，CTO</h4> <p>网名 IceskYsl，简称Ice， 80后，典型巨蟹男，移动互联网创业者； 技术、产品、运营、管理均不得其道，略懂皮毛；Google 产品的重度依赖者，Mac、Android、iPhone、BlackBerry 的非典型用户；求学武汉，毕业南下深圳，而后北漂在京，至今数年有余。追寻内心的想法，不随波逐流，爱折腾、爱旅行、孩子气、享受工作，安静的做喜欢的事情。译《The Rails Way》，著有：《Google API 大全—-编程开发实例》、《Google Android 开发入门与实战》、《It’s Android Time: Google Android 创赢路线与产品开发实战》。</p> <h4>李杰，极客学院创始人</h4> <p>80后，移动互联网创业者，大四时北上联合创办eoe。非典型文艺青年一枚，果粉一枚，各种互联网产品、App重度体验用户，早期BBer。国内IT沙龙活动的活跃者，擅长市场活动策划。正儿八经运营过社区，干过PR。闲暇时写过小说、拿过摄影奖、拍过微电影。爱阅读、摄影、绘画。热爱艺术，时常隐身去各种画展，独自搞定过公司的大型涂鸦。喜欢思考，台球控，正能量。</p> </div> </body> </html>
18.4、媒体查询解析
这一部分就是针对不同的设备之间浏览器的页面究竟该怎么显示进行处理，笔记仍然是等看完所有课程再记录
textEnd.css
/* 响应式布局，移动优先原则，优先实现小屏幕 * */ h1{ width: 100%; height: 60px; margin: 0; line-height: 60px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.2); position: fixed; top: 0; left: 0; text-align: center; } .textC{ width: 96%; margin: 60px auto; -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 1px; -moz-column-gap: 1px; column-gap: 1px; -webkit-column-rule: 1px dashed rgba(0,0,0,.3); -moz-column-rule: 1px dashed rgba(0,0,0,.3); column-rule: 1px dashed rgba(0,0,0,.3); } .textC h2,.textC h3{ font-weight: bold; color: #35B558; line-height: 2em; } .textC h4{ font-weight: bold; line-height: 2em; } .textC p{ line-height: 1.5em; margin: 10px 0; } .textC p:first-letter{ font-weight: bold; } .textC ol li{ list-style-position: inside; list-style-type: decimal; } @media only screen and (min- 481px) { .textC{ -webkit-column-count: 2; -moz-column-count:2; column-count:2; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } } @media only screen and (min- 769px) { .textC{ -webkit-column-count: 3; -moz-column-count:3; column-count:3; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } }
textEnd.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/textEnd.css"/> </head> <body> <h1>关于我们</h1> <div class="textC"> <h2>关于我们</h2> <p>极客学院IT在线教育平台隶属于北京优亿致远无线技术有限公司。</p> <p>极客学院是中国最大的IT职业在线教育平台。极客学院的理念是通过最新实战课程，帮助职业开发者系统学习Android、Cocos2d-x、iOS、HTML5、Java等高薪所需的职业开发技能。目前，超过60万专业技术开发者通过极客学院学得了更有竞争力的最新IT技能。</p> <p>2014年，中国几乎所有的热门技术及应用课程，都由极客学院首发。包括：中国第一个「Flappy Bird」课程、中国第一个「2048」的课程、中国第一个「围住神经猫」等诸多中国乃至全球首发课程。在六月份，WWDC苹果发布全新的Swift开发语言时，极客学院更是7个小时就上线了Swift的开发课程。</p> <p>创始团队写过中国大陆第一本Android开发教材，重印高达18版，是Android开发学习入门必读红宝书。同时创办了中国最大的移动开发者社区eoe(注册用户超200W)。</p> <h3>一、什么是极客</h3> <ol> <li>不满于现状，自信且不迷信权威</li> <li>保持一颗好奇心，勇敢尝试各种事情</li> <li>总是寻求更好的解决问题的方式</li> <li>不断给自己设置挑战并且努力去完美超越</li> <li>某个领域的专家并热爱分享自己的知识</li> </ol> <p>在极客学院，团队的每个人都是极客精神的继承者和实践者。</p> <h3>二、我们的价值观</h3> <ol> <li>身为极客，与众不同</li> <li>敏捷行动，快速反思，且行且调整</li> <li>不抱怨，主动改变，自适应</li> <li>以目标和结果论英雄</li> <li>永远寻找最优雅的方式解决问题</li> <li>透过数据，背后的真相</li> </ol> <p>极客学院，我们痛恨平庸和因循守旧，我们用心做每一件事，用极客精神影响和改变我们身边的人和事，并以此为目标，改变中国传统教育，释放学习能力，帮助更多人快速学会开发技术，成就每个人的职业生涯，共同去改变这个世界。</p> <h3>三、我们的使命</h3> <ol> <li>打破传统教育纸上谈兵的禁锢，直接将企业需求通过课程输入给学习者</li> <li>通过为学习者提供专业精确的职业路径图，帮助学习者快速提升开发能力</li> </ol> <h3>四、创始人故事</h3> <h4>靳岩，极客学院创始人，CEO</h4> <p>中国大陆第一本Android开发教程《Google Android开发入门与实战》作者之一，eoe联合创始人; AAMA六期学员; 北京邮电大学毕业; 擅长Android开发，正在学习iOS和W8等技术开发。移动App控，喜欢最新最简单的App，Google产品控，喜欢Google的各类产品，喜欢移动开发，喜欢看书，研究和体验各类产品。喜欢看火影，海贼王，魔兽对战录像，喜欢结交各路朋友，喝各种茶，喝各类咖啡，偶尔吟诗作词，喜欢滑雪，游泳，禅。</p> <p>他认为:</p> <ol> <li>一个人应该为了自己的理想而奋斗</li> <li>人活着只有一次，所以一定要做自己下定决心去做的事情</li> <li>失败可以原谅，但是不能原谅的是不去尝试和努力</li> </ol> <h4>姚尚朗，极客学院创始人，CTO</h4> <p>网名 IceskYsl，简称Ice， 80后，典型巨蟹男，移动互联网创业者； 技术、产品、运营、管理均不得其道，略懂皮毛；Google 产品的重度依赖者，Mac、Android、iPhone、BlackBerry 的非典型用户；求学武汉，毕业南下深圳，而后北漂在京，至今数年有余。追寻内心的想法，不随波逐流，爱折腾、爱旅行、孩子气、享受工作，安静的做喜欢的事情。译《The Rails Way》，著有：《Google API 大全—-编程开发实例》、《Google Android 开发入门与实战》、《It’s Android Time: Google Android 创赢路线与产品开发实战》。</p> <h4>李杰，极客学院创始人</h4> <p>80后，移动互联网创业者，大四时北上联合创办eoe。非典型文艺青年一枚，果粉一枚，各种互联网产品、App重度体验用户，早期BBer。国内IT沙龙活动的活跃者，擅长市场活动策划。正儿八经运营过社区，干过PR。闲暇时写过小说、拿过摄影奖、拍过微电影。爱阅读、摄影、绘画。热爱艺术，时常隐身去各种画展，独自搞定过公司的大型涂鸦。喜欢思考，台球控，正能量。</p> </div> </body> </html>
18.5、响应式表格项目实战
end.css
/* 绿色 #35B558 橙色 #ff5c00 深灰 #666666 浅灰 #F8F8F8 * */ h1{ font-size: 30px; text-align: center; color: #666; } table.responsive{ width:98%; margin: 0 auto; color: #000; border-collapse: collapse; border: 1px solid #666666; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); } table.responsive td,table.responsive th{ border: 1px solid #666666; padding: .5em 1em; } table.responsive th { background: #35B558; height: 24px; line-height: 24px; } table.responsive .actions a{ color: #ff5c00; padding: 0 2px; text-decoration: none; } table.responsive .number,table.responsive .actions{ text-align: center; } @media (max-480px){ table.responsive{ box-shadow: none; border: none; } table.responsive thead { display: none; /*不显示表头*/ } table.responsive tr, table.responsive td { display: block;/*以块级元素显示*/ } table.responsive td:nth-child(1), table.responsive td:nth-child(2) { padding-left: 25%; } table.responsive td:nth-child(1)::before { content:'课程序号'; position: absolute; left: .5em; font-weight: bold; } table.responsive td:nth-child(2)::before { content:'课程名称'; position: absolute; left: .5em; font-weight: bold; } table.responsive tr { position: relative; margin-bottom: 1em; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2); } table.responsive td { border: none; } table.responsive .number { background: #35B558; text-align: left; } table.responsive td.actions { position: absolute; top: 0; right: 0; border: none; background: none; } }
end.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/end.css"/> </head> <body> <h1>极客学院相关课程</h1> <table class="responsive"> <thead> <tr> <th>课程序号</th> <th>课程名称</th> <th>课程操作</th> </tr> </thead> <tbody> <tr> <td class="number">150406</td> <td class="name">移动应用开发课程</td> <td class="actions"> <a href="#">修改</a><a href="del">删除</a> </td> </tr> <tr> <td class="number">140407</td> <td class="name">web前端开发课程</td> <td class="actions"> <a href="#">修改</a><a href="del">删除</a> </td> </tr> <tr> <td class="number">140408</td> <td class="name">操作系统&数据库系列课程</td> <td class="actions"> <a href="#">修改</a><a href="del">删除</a> </td> </tr> <tr> <td class="number">140409</td> <td class="name">智能硬件&物联网系列课程</td> <td class="actions"> <a href="#">修改</a><a href="del">删除</a> </td> </tr> </tbody> </table> </body> </html>
18.6、响应式图片项目实战
响应式图片指用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。常见实现方式有：
用srcset和sizes加载不同图片
picture、source media加载不同图片
用source type指定多种样式
超赞polyfill-picturefill
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--<meta name="viewport"--> <!--content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title>--> <!--<link rel="stylesheet" type="text/css" href="css/css.css"/>--> <style> .imgContainer{ max-width: 1000px; margin: auto; } .imgContainer h2{ font-size: 2vw; } .imgContainer img{ width: 100%; } </style> </head> <body> <div class="imgContainer"> <!--<h2>picture source media</h2>--> <!--<picture>--> <!--<source media="(max-480px)" srcset="img/480x320.gif">--> <!--<source media="(max-640px)" srcset="img/640x427.gif">--> <!--<source media="(max-720px)" srcset="img/720x480.gif">--> <!--<source media="(max-900px)" srcset="img/900x600.gif">--> <!--<img src="img/900x600.gif" alt="" />--> <!--</picture>--> <!--<h2>srcset设置响应式图片</h2>--> <!--<img src="img/480x320.gif" alt="responsive images"--> <!--srcset="img/480x320.gif 480w,--> <!--img/640x427.gif 640w,--> <!--img/720x480.gif 720w,--> <!--img/900x600.gif 900w"--> <!--sizes="(min-900px) 900px,100vw"--> <!--/>--> <img srcset="img/480x320.gif 480w, img/640x427.gif 640w, img/720x480.gif 720w, img/900x600.gif 960w" sizes="(min-900px) 900px, 100vw" src="img/480x320.gif" alt="responsive images" /> <!--srcset="img/480x320.gif 480w, img/640x427.gif 640w, img/720x480.gif 720w, img/900x600.gif 960w" ----这一段的代码后面的w就相当于一个标记，目前还没有见过除了w之外的写法， 这个w就相当于实际图片宽度的像素值，但是他们只是一对一关系的标记。所以 要知道对应关系才可以正确使用。 --> <!--sizes="(max-480px) 480px, 100vw" 这句代码的意思是在视窗的最小宽度为900px时，选择要加载的图片时，当前视窗就当是按照大小为900px计算 其他的宽度就是100% 设备宽度（vw相关单位解释： 1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。 3.vmin：vw和vh中较小的那个。 4.vmax：vw和vh中较大的那个。 1、px：绝对单位，页面按精确像素展示 2、em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:62.5%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; 这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了, em的特点 em是个相对值 他会根据父级元素的大小而变化 但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事情 这样的情况下,就出现了rem rem的区别在于它是相对于根基元素的,因此不会被它的父类影响到 结论：之所以前端行业做移动端会普遍默认用rem或em,是因为可以通过js控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果 3、rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。// 是截止目前用的最多也是最流行的 rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取) ），这里的vw如果改成了具体单位，那意思就是除了当成900px之后只剩一个选项那就是100px的，响应式布局只会显示有两张图。 --> <!--这段代码我写得是没有问题的，问题出在浏览器的默认处理方式上。--> <!--在firefox发现一个问题，就是点开浏览器默认的像素比是1.25， 需要调整像素比为1才能按照规定数值工作，否则会与给定数值不一致 谷歌浏览器没找到在哪调整这个像素比，而且谷歌浏览器也是默认像素比是 1.25，所以就会一直有问题。目前还没弄明白像素比的问题，我要继续研究--> <!--我计算了一下，像素比就是把本来计算的数值乘以这个数值， 数值越大的代表的设备分辨率越高。所以在浏览器中实际显示的时候 就会发生图像视觉大小很小的时候，分辨率就已经很高了。--> <!--我日了狗了啊，我终于知道谷歌浏览器怎么个回事了，弟弟行为啊，--> <!--谷歌浏览器只负责第一次加载时的样式，他妈的更改之后就不管之后浏览器样式的更改了。--> <!--<img--> <!--sizes="(min-900px) 900px--> <!--,(min-720px) 720px--> <!--,(min-640px) 640px--> <!--,(min-480px) 480px--> <!--"--> <!--srcset="img/480x320.gif 480w,--> <!--img/640x427.gif 640w,--> <!--img/720x480.gif 720w,--> <!--img/900x600.gif 900w"--> <!--src="img/480x320.gif"--> <!--alt="responsive images"--> <!--/>--> <!--<img srcset="img/480x320.gif 480w, img/640x427.gif 640w, img/720x480.gif 720w"--> <!--sizes="(max- 480px) 480px, 100vw" />--> <!--<img class="image" src="mm-width-128px.jpg"--> <!--srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"--> <!--sizes="(max- 360px) 340px, 128px">--> </div> </body> </html>
参考资料：
让我启蒙的一篇----https://www.jianshu.com/p/607567e488fc
让我理解最深刻的一篇----响应式图片 srcset 和sizes属性：https://blog.csdn.net/wuyou1336/article/details/73863071
响应式图片----https://blog.csdn.net/zyr12/article/details/50211689
image的srcset属性----https://segmentfault.com/a/1190000004254111