手记

靠实战进阿里 我的实战课《所向披靡的响应式开发》学习心得

这几天学习了慕课网的实战课程——所向披靡的响应式开发,跟着姜维老师学到了很多,写篇手记将涉及的主要知识点记录下来,以便日后温故。
特别说明:1.文章只是**简单的记录**,如果你对其中的某些内容感兴趣或者是一名前端的初学者,可以去购买这节实战课程[课程地址][1],相信你会有很大的收获;2.文章只是记录了本人学到的部分知识点,并不代表课程本身的重点,课程的重点可参照课程的目录[课程目录地址][2]


多屏时代注定了响应式开发是被迫切需要的,下面来简单说一下响应式网站的优点 1.减少工作量 ①:网站、设计、代码、内容都只需要一份代码 ②:多出来的工作量只是JS脚本、CSS样式做一些改动;2.节省时间;3.每个设备都能得到正确的设计;4.搜索优化(谷歌提出了对响应式搜索的优化,爬虫可以更有效的搜索到网站内容);5.更好的用户体验;6.更方便的用户来源体验。响应式的网站可以在任何类型的设备和任何尺寸的屏幕上,从手机到平板到大屏显示器等等,都可以轻松的浏览和使用。
响应式网站是一个设计理念,它是多项技术的综合体。包含以下三大特征: 1. 弹性网格布局(flexible grid layout);2. 弹性图片(flexible image);3. 媒体查询(media queries)。
响应式网站设计实践原则 1.progressive enhancement 渐进增强 2.graceful degradation 优雅降级

一、目录结构

根目录下要建立:

  1. LICENSE.txt :相关协议;
  2. README.md :项目简介、使用方式、相关链接;
  3. CHANGLOG.md :项目每个版本的更新,说明版本号、更新内容、修复了哪些问题等;
  4. humans.txt :这是一个普通文本文件,包含了参加该网站创建人员的信息,如团队成员、感谢和站点的技术信息。 通过该文本文件,我们可以快速了解该网站背后的团队信息以及他们的故事http://www.humanstxt.org.cn/
  5. robots.txt :搜索引擎首先访问的,网络爬虫按照其内容规定抓取(可选);
  6. favicon.ico :网页title前的小图标
  7. .gitignore :src文件夹下.gitignore 版本管理,告诉git不需要版本管理的文件,如操作系统生成的、操作日志等。
  8. .editorconfig :src文件夹下.editorconfig文件包含代码格式、缩进规则、换行规则等。
二、viewport视口

viewport视口:PC端一般只有一个视口概念,即屏幕显示视口;移动端则有三个视口概念:
1.布局视口(layout viewport):虚拟的将PC的视口在手机上布局出来;
2.可视视口(visual viewport):用户看见的视口,布局视口的宽度不变,可视视口的宽度在随着用户的缩放而发生变化;
3.理想视口(ideal viewport):布局视口在一个设备上的最佳尺寸,便于浏览器浏览阅读等最佳宽度,用户不需要缩放等就可以获得好的体验。

三、markdown编写
markdown编写语法:(http://dillinger.io/ markdown文件在线编写)
#  - or *    1.
>
[]()
![]()
*斜体*
**粗体**
***粗体加斜体***
1234
---:---:---::---
aaacccbbbnnn
ccceeetttyyy
``
```html   ```
注意:如果你是以前没接触过的初学者,这些内容你可能看不懂。可以网上查一下
四、webstorm快捷键
ctrl+alt+t              标签环绕
ctrl+shift+v            剪辑版
ctrl+alt+enter          在上边添加一行
ctrl+shift+enter        在下边添加一行
ctrl++/-                折叠代码
ctrl+shift++/-          折叠全部代码
alt+shift+/           上下移动整行代码
Alt + Enter             把陌生单词拼写加入字典
ctrl+alt+/右           返回上一次光标定位的地方
ctrl+e                  查看最近使用的文件
ctrl+shift+退格键       找到上一次编辑的地方
shift/F1                查看图片
F2                      定位错误或者警告
Ctrl +Alt + L           格式化代码
ctrl+[/]                移动光标到代码块开始或结束处
ctrl+shift+alt+t        重构名称
ctrl+shift+u            切换大小写
# . []  div#id.class[data-] +tab
lorem100 +tab        自动填充
a{内容} +tab
ul>li.item*5 +tab
ul>li.item$*5 +tab
html:5 +tab
link:css +tab
script:src +tab
form:get +tab
注意:本地webstorm配置不同快捷键也可能不同,具体可以查看自己本地设置

webstorm emmit插件,分为以下几种类型:

#嵌套
> +  ^  * () 

#属性
#  .  []  

#数字不全
$ 

#文本
{}  lorem
五、 一些小知识点
  1. HTML:5新标签:
    <section></section>:可表示页面里面的任何区域;
    <article></article>:表示页面的一小部分,像特殊的section,比如广告,一段小文章之类的;
    <b></b>:表示要注意了,不表示强调;
    <em></em>:表示强调;
    <i></i>:表示不同的语态,语气
  2. display:inline-block使页面元素产生空隙解决方法:
    1、删除所有换行符制表符;2、设置父元素的font-size:0;(有副作用)
    3、每个闭合标签写在后一个标签的开始前面;4、标签不闭合,浏览器会自动补足标签;5.设置负边距;6.利用float;7.css4中的white-space-collaping属性
  3. 清楚浮动的三种方式:
    1:加入空标签<div style="clear:both"></div>;
    2.在父元素中使用:overflow:hidden; 或者 overflow:auto;
    3.加入公用css属性
    .clearfix:after{ content:""; display:table; clear:both; }
    .clearfix:{zoom:1}
    也可以这样写:
    .clearfix:after, .clearfix:before{ content:""; display:table; }
    .clearfix:after{ clear:both; }
    防止浏览器上部的崩溃,maring-bottom 和margin-top的叠加。
    原理是触发BFC
    bfc (BlockFormatContext)块级格式化上下文 只要方法触发了bfc就可以清除浮动(闭合浮动预防高度塌陷)
    float(除外none),overflow(除外visible),
    display:table-cell/table-caption/inline-block,position:fixed/absolute等
  4. 单位em与rem
    em是以父元素的font-size为参照,font-size:62.5%时 1rem=10px(10/16*100%)
    rem是以根元素html的font-size为参照,font-size:100%时 1rem=16px
  5. 使用相邻兄弟选择器(+)可以方便的设置边框分割
    通过这种方式
    .feature .item + .itme 可以给多个元素中的非第一个元素增加margin-left或者border-right:
    li +li{
    border-left:1px solid #999;
    margin-left:-3px;//去除inline-block的3px间距(换行符或空白符造成的)
    }
  6. 将图片变成灰色,使用filter: grayscale(100%); -webkit-filter: grayscale(100%); /针对Chrome浏览器/

  7. 文字不换后,超出的文字截断,在末尾显示...
    .notice a:first-child{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
  8. 其他
    按照惯例class采用中横杠命名,id采用驼峰命名。
    css重置样式用normalize.css
    背景颜色#f7f7f7,color:#222
    ::selection{} 更改选中文字样式
    Calc( 180vw– 30em)
    gt大于 lt小于 gte大于等于 lte小于等于
    :before{
    Content:’最新公告:\00a0\00a0’;//在content中增加空格的方法
    }
    $('.login').animate({right:-180,opacity:0},400,function(){ $(this).css('display','none');

<img src=”480.png” alt=”” srcset=”480.png 480w,800p.png 800w,1640.png 1640w” Sizes=”(min-width:800px) 800px,100vw”/>

六、课程中提到的一些工具或连接

http://gs.statcounter.com/ 可以按照国家来划分,浏览器使用率
http://caniuse.com/usage-table 浏览器使用统计, 面向世界
http://necolas.github.io/normalize.css/ 在保证各浏览器呈现一致的情况下,保留了各标签元素原有的特点
http://autoprefixer.github.io/ 自动补全各游览器前缀css代码
http://editor.method.ac/ 在线绘制SVG
https://icomoon.io/ 在线绘制SVG
http://dillinger.io/ markdown 文件在线编写
https://tinypng.com/ 图片压png
http://caniuse.com/ 查询属性、标签兼容性
http://www.genymotion.net/ 最快的安卓模拟器
http://owlcarousel.owlgraphic.com/ 幻灯片插件
https://modernizr.com/ 会主动检测浏览器对css3、HTML5等等功能性的支持情况。
http://browsehappy.com/ 最新游览器下载
http://www.browsersync.cn/ 各浏览器终端同步测试
http://browserhacks.com/ 各浏览器hack写法查询
https://github.com/aFarkas/html5shiv 让老版本浏览器支持HTML5新标签
https://github.com/scottjehl/Respond IE6-8支持媒体查询min/max-width特性
https://modernizr.com/ 检测浏览器是否支持某特性

14人推荐
随时随地看视频
慕课网APP

热门评论

我都没搜到有这个课程

你学习的这个课程有项目的效果图和源码???


查看全部评论