响应式布局入门之——侧栏菜单

  • A+
所属分类:web前端

一直以来响应式布局都是利用的bootstrap来做,但是在手机上浏览的话,bootstrap样式文件还是有点大 118k,如果再用上一些js库的话,上个几百k是轻轻松松了,这样一来用移动流量的话真的吃不消啊。

所以痛定思痛,还是用原生的来写吧,原生css样式,js最多用的zepto, 当然这篇文章我还是用的原生js. 做的这个例子还是比较简单的,毕竟是入门级别的嘛

效果篇

pc,mac端响应式布局入门之——侧栏菜单

pad端

其实pad端和pc端很难区分,pad的分辨率还是比较高的啊响应式布局入门之——侧栏菜单

手机端

点击菜单前 和 点击菜单后的效果响应式布局入门之——侧栏菜单

代码篇

html代码

上段html页面中包含的主要关键点:

1.一个典型的针对移动端优化的站点包含:

width属性控制视口的宽度。可以像width=600这样设为确切的像素数,或者设为device-width这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值。(相应有height及device-height属性,可能对包含基于视口高度调整大小及位置的元素的页面有用。)
initial-scale属性控制页面最初加载时的缩放等级,一般初始化为1.

2.一个只在移动浏览器下显示的按钮

3.一个在pc大分辨率下面展示的导航

4.一个在移动分辨率下展示的导航

大家可能会问,为什么需要两段导航代码呢,不是可以写一段pc和移动公用么,一开始我也是这样写的,但是发现pc端缩窄浏览器的时候,分辨率相当于移动端,然后用按钮控制了导航隐藏之后,再扩张浏览器, 导航还是隐藏的。

只要不去拉缩网页就没问题,但是为了体验的完美,牺牲下代码共用性吧,写了两段导航html.

css代码

css代码还是比较容易理解的,主要靠@media screen来控制响应式布局,使用的方式可以自行google或baidu, 一般来讲只要对768px进行一个区分,大于768为pc或pad模式, 小于768为移动端模式。 当然你还可以区分的更细,一般768px的区分已经可以满足大部分的需求

javascript代码

javascript代码主要是用于控制 在移动环境下显示的 导航按钮了,触发导航显示或者隐藏,还是能很简单的理解的

小结

考虑到移动端的浏览速度,框架的选型尤其重要,有些框架虽然功能强大,但是随之尺寸也是蹭蹭蹭的往上涨。 所以在一些对速度要求比较高的项目中,或者是一个简单的小型项目中,用原生语法的或者选择一些很轻量级的框架会有非常明显的效果提升。

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: