发表于: 2017-03-19 23:22:16
1 505
今天完成的事情
复习了之前的知识点
响应式和自适应的区别
响应式:建立一个网页,通过CSS Media Queries,Content-Based Breakpoint等技术来改变网页的大小以适应不同分辨率的屏幕。
自适应:为不同类别的设备建立不同的网页,检测到设备分辨率大小后调用相应的网页。目前AWD网页主要针对这几种分辨率
html-css代码规范
1.使用CSS缩写属性
CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。
2.去掉小数点前的“0”
3.简写命名
很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!
4.16进制颜色代码缩写
有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。
5连字符CSS选择器命名规范
1).长名称或词组可以使用中横线来为选择器命名。
2).不建议使用“_”下划线来命名CSS选择器,为什么呢?
输入的时候少按一个shift键; 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的) 能良好区分JavaScript变量命名(JS变量命名是用“_”)
6.不要随意使用id
id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。
7.为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。
明天计划的事情
完成任务12
遇到的问题
今天主要复习之前的知识点
收获
响应式Web设计的优点和缺点
优点:
1).对用户友好 响应式设计可以向用户提供友好的Web界面,因为它可以适应几乎所有设备的屏幕。现在技术发展日新月异,每天都会有新款智能手机推出。如果你拥有响应式Web设计,用户可以与网站一直保持联系,而这是基本的也是响应式实现的初衷。
2).移动频段(Mobile Segment) 在响应式网站的帮助下,你可以获得网站流量的全景图。你需要做的只是创建一个移动频段(的流量统计),以获得与网站流量相关的所有必要信息。流量的状态在分析网站性能及采取必要措施提升性能方面十分有用。
3).积累分享 响应式Web设计可以让你(作为网站的拥有者)通过单一的URL地址收集所有的社交分享链接。你可以为创建更好、更友好的网站而做出积极贡献。
4).最佳化搜索引擎 搜索引擎也在变得越来越聪明,它们足够智能可以完成移动网站和桌面网站的连接。
5).无重定向 响应式Web设计最大的优点之一是,你不必在乎任何重定向,它包含无用户代理定向。所以当你很少负责解决重定向及定向用户时,这是一件很棒的事情。
6).更少维护 开发一个独立的移动网站,会增加你的工作负担。实际上你就拥有了两个独立网站。如果你有一个响应式网站,维护的成本将会很小,因为它只有一个布局,且可工作在所有类型的设备上,而这可以明显地减少你的工作量。
缺点:
1).加载需要一定的时间 虽然,它不是一个大问题,在响应式设计中,需要下载一些看起来并不必要的HTML/CSS。除此之外,图片并没有根据设备调整到合适大小,而这正是导致加载时间加倍的原因。
2).优化搜索引擎 对于响应式Web设计,为搜索引擎确定关键字不是一件容易的事。因为相比一般桌面用户,移动用户多采用不同的关键字,修改标题及其他事项都比较困难。
3).Google排名 如果响应式网站仅基于移动内容,它可能会影响到网站的Google排名。因为Google不支持这样的网站,它不会对你的网站进行索引。
4).时间花费 开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站,可能耗时更多。如果你想要一个响应式网站,最好从草图开始重新设计。
5).布局 响应式Web设计的布局主要是液态的,这也正是设计者对设计样式不好控制的原因。而且眼下正是设计者提前展示各种“复制品”的时候。设计者试图针对移动和桌面布局分别显示线框和设计原型。只有等到这两种布局均得到提高后,响应式Web设计策略才能真正实现。
评论