frontopen模板移动设备浏览适配正式上线

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

最近一段时间,终于有时间闲下来为博客调整一下界面了。博主平时在空闲的时间喜欢用手机浏览网站,可每当浏览前端开拓者的时候都会为那蛋疼的页面布局郁闷不已。正好遇到这几天有空,特地将frontopen模板做了三个分辨率的适应调整。

本次的三个分辨率适配判断针对三种设备情况:

1.移动设备,如苹果手机、安卓手机、各种pad,它们的分辨率一般都在800x600左右,因此页面最小的分辨率判断范围为960px。960px的分辨率基本可以通吃大多数的移动设备,并且不影响电脑的浏览体验。该页面布局以单栏内容为主,以节省手机操作为主要思路,将主要内容展示在页面上,并尽量在有限的布局空间内将重要的内容展现出来。效果如下图:

20131206102102

2.小分辨率电脑屏幕适配,主要的适配范围是一些老式的显示器,如17寸crt、15寸液晶显示器与目前主流的笔记本屏幕分辨率。它们的分辨率宽度一般在1024px 至 1366px 之间。因此第二个阶段的分辨率判断设置为1366px。该页面布局以双栏为主,也是本博一直以来的布局模式。在此模式下内容部分得到了充分展示空间,并且配合适当的自适应伸缩,可以适合多种小分辨率电脑屏幕,并且使页面显得丰满。效果如下:

20131206101902

3.大分辨率屏幕显示适配,该模式主要用于适配高端的显示设备。如newpad、高端安卓手机、16:10与16:9大分辨率显示器。两栏模式的页面布局在大分辨率的显示器上显得内容过于松散,不饱满。若使用固定分辨率将页面居中,又会感觉浪费页面空间。因此在两栏模式的基础上改良了三栏模式,使页面可以充分的自适应并填充页面。使页面在任何显示器上都能够显得丰富、饱满。效果如下:

20131206101339

 

三栏自适应宽度页面布局属于一种创新与尝试,目前尚未得知用户对此类页面的体验反馈,如果大家在浏览三栏页面时感到不适,请及时向我反馈。

本次模板前端开发主要是出于增强用户体验的目的,这也是每一个前端开发人的使命。因此如何给用户一个良好的体验是我们需要思考的话题。关于页面判断的实现用到了@media screen和jquery,其中以@media screen为主,关于@media screen的使用方法请参考@media screen解决移动web开发的多分辨率问题一文。jquery在本次开发中仅仅用在960px分辨率下的导航栏提示信息。

最后要提到的一点是@media screen是css3的增强属性,因此frontopen的三种模板显示在ie6、ie7、ie8中是无法运行的。在ie中还是以两栏模式为主,请大家在开发模板时务必考虑默认的显示样式用于适配ie。