联系博主


你的名字:
Email:
建议:

响应式网站开发学习心得

编辑时间:2016-05-09      赞:7       踩:1

导言:

       这一篇博文主要介绍我对响应式网站开发的一些看法,做响应式网站小实例时遇到的一些问题及其解决方法。以下内容仅为一家之言,博主也是这方面的菜鸟,文章的内容难免有所偏颇,请大家见谅。

正文:

       什么是响应式网站?响应式网站就是能响应不同设备,从而展示响应布局的网站。响应式网站的优点是显而易见的,一套模板,多种布局。电脑有电脑的布局,平板有平板的布局,手机手机的布局。不过,缺点也一样显而易见,开发响应式网站代码会臃肿很多,并且即使是多种布局,它们的基本框架与功能是一样的。因此,它的功能并没有针对移动设备独立开发的模板灵活。所以,若要在生产中运用响应式网站开发,必须先权衡好的它的利和弊。不同的产品,有不同的需求,所以不能一概而论。
       为了加深对响应式网站开发的理解,学了响应式网站开发的基础后,我便在网上找了个响应式模板,然后自己用HTML+CSS+JS实现了一遍。这其实也是我一直以来的学习方式,每学完一个阶段的知识,就会找相应的一些小项目去做,做完了。感觉这门掌握的还可以就继续往后学习。下面,我就讲一下我在写这个项目时遇到的问题以及我从中学习到的一些小经验吧。
       在开发响应式网站的头中应该加入下面标签,“’’。这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。当然这个标签也可以让手机模仿大屏幕,使其能兼容PC端的网站。为了解决手机浏览的我的这个博客的兼容性问题(在建站系列文章中提到过),我就是这样做的---把‘width=device-width’改为‘width=1060px’,让手机模仿宽度为1060px的屏幕。然而,我并不建议大家采用如此粗暴的方法,这样会影(导)响(致)用(非常)户(差劲)的阅读体验我之前之所以使用这个方法是因为当时我并没有学习响应式网站开发的相关知识。

       为什么我要把宽度设置为1060px而不是其他宽度呢?那是因为我一开始写这个网站的模版时把菜单栏的宽度设置为1060px了,如果设置为其他宽度网站的头部便不能菜单栏匹配了。这就引起了下一个话题。在做响应式网站开发的时候,宽度度量单位使用百分比会大大减少各种兼容性问题,从而大大降低开发的难度。不仅如此,用百分比度量单位布局也会使布局更加灵活。例如,让相片随着浏览器大小的改变而改变。再例如,

                                                                                                    屏幕宽度足够时


                 屏幕宽度不足时
       当然,具体情况具体分析,也不是什么东西的宽度用百分比布局都合适。还是以相片为例,如果你觉得某张相片如果随着浏览器大小的改变而改变会影响相片的效果,那么此时,你就不应该用百分比作为度量单位了。
       以下两端,红字为重点,请别被黑字误导~~~~~~
       除此以外,字体大小也是一个值得考虑的问题。一般来说,字体的默认大小都是16px的。然而,万恶的IE兼容性问题又来了。IE中16px的字体明显比欧朋和360浏览器的大了不少(博主亲测,估计其他浏览器应该和欧朋浏览器的情况一致),致使整体布局的协调都被破坏了。到底该如何解决呢?(无须解决,因为这不是兼容性问题。是某逗比的问题
       若干天后,某逗比发现,不是IE的16px比其他浏览器的大。而是他不小心把IE的缩放比改为110%了。可怜那逗比花了整整一个晚上寻找解决方案。当然我不会告诉你们这篇博客就是那个逗比写的。废话少说,show you the code。
html{
font-size:62.5%;/*10 ÷ 16 × 100% = 62.5%*/
}
body{
font-size:1.4rem;/*1.4 × 10px = 14px */
}
       其实这样的字体大小确实比浏览器默认认的字体大小号看一点,既不太大而不太小。当然这全凭个人喜好(还是给自己留点面子吧!~~o(>_<)o ~~啊········)。

       Rem是一个比较新的字体度量单位,也比较好用,网上有很多关于rem和em的讨论,有兴趣的可以自行搜索。这样既可以使字体大小在可接受的范围,也可以缩小IE的16px与其他浏览器的16px之间的差距,使其不至于影响整体布局的协调性。
       以上就是我对于响应式网站开发的一些总结。加上响应式网站开发的小例子,我也算是写了好几个小页面的前端小菜鸟一枚。几个页面写下来,感觉对于前端知识的学习来说,多写代码真的是太重要了。因为有的兼容性问题,不亲自写页面,你是不会想到的。而且其中一些兼容性问题挺棘手的,即使你在网上找到相应的解决方案,它也可能过时了,需要做相应的修改。废话不多说了,希望这篇文章对大家有所帮助,也希望大家不要被误导,如已被误导,万分抱歉。





转载请注明:
    本文转载自:www.kantblog.com/blog/WebDevelop/3

Kant©2016 All rights reserved 粤ICP备16014517号