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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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