前端开发小技巧(来自知乎)
1.You Might Not Need jQuery
不用jQuery,原生js如何实现,可以参考这里:You Might Not Need jQuery 。原生js越来越好了,如果是简单的页面,没必要引入一个庞大的jQuery,尤其在手机端,对速度流量敏感的地方,另外最好自己简单封装一些常用的函数,比如toggleClass等。。。
2.Firefox查看源代码功能检查页面错误
页面写完后,记得用Firefox 查看页面源代码功能,可以一眼发现未闭合标签、未转义的HTML字符,如果不嫌麻烦,可以提交代码到 http://validator.w3.org/ 验证HTML、CSS,下面图片来自CSDN当前首页源码,可以看到Firefox红色高亮了错误的HTML代码,_blank后面多了一个双引号。
3.少用id
如果不在页面中用js引用元素,尽可能不要设置元素的id,也尽量不要用# main{}来设置元素css样式,而是用class方式.main{},因为
可以防止ID重复,造成错误
可以方便引入新CSS复写样式,另外应当绝对避免行内css样式.
4.max-device-width
使用 max-device-width检测而不是max-width来兼容手机、平板等,可以避免桌面浏览器因为窗口小,而看到丑陋的手机页面效果。
@media only screen and (max-device-width:980px){}
5.flex布局
多列布局,不考虑低级浏览器可以使用CSS3的flex布局,可以做到比浮动更好控制,如我写的样例代码,垂直、水平居中可以很容易实现:
6.二维码生成当前网址的插件
装个二维码生成当前网址的插件,以方便查看手机实际显示效果,现在移动端日益重要,作为前端,一定不能忽视移动端的显示效果,虽然浏览器都支持选择device来测试不同的设备显示效果,但毕竟和真实设备有差别,尤其在测试微信内的页面时候,非常方便。
7.让一个块级元素在某区域内上下左右居中
.container{ border: 1px solid # 000; width: 300px; height: 300px; position: relative; } .box{ border: 1px solid # 000; width: 50px; height: 50px; /*magic blow*/ position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; }
效果:
解释:原理就是让 box 自己既要往左也要往右,既要往上也要往下。这时候它就不知所措了,只好待在中间。
8.chrome中隐藏元素
在 Chrome 浏览器的 Elements 里面选中某个元素,按 h 可以隐藏该元素。
9.适当使用localStorage缓存HTML表单内容.
适当使用localStorage缓存HTML表单内容,防止浏览器崩溃、死机造成填写丢失.
具体事例移步这里cache form.通过‘查看网页源代码’可以看到实现的js,我还没研究明白。。。
10.liveload
使用一些chrome的liveload插件或者grunt、glup这些构建工具的liveload插件,这样可以边写代码变自动刷新页面,实时看效果.
未完待续。。。
参考:前端界有哪些越早知道越好的小技巧小知识?
关键字:css, html, firefox, chrome
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!