网站多平台自适应模板

作者:stoat 发布时间:2014-07-22 分类:闲扯

小小改版后,决定做多平台兼容,电脑、手机、平板自适应的模板。

原理:非js实现,纯css,利用@media (min-width: xx){}属性针对不同分辨率编写css样式即可。
优点:实现简单,比js容易维护

期间使用了一款CSS 栅格系统:https://github.com/fenbox/bento

在开发自适应模板过程中推荐的调试工具:Chrome浏览器

使用如图:
网站多平台自适应模板.jpg

使用方法:F12,调出Hide Drawer,选择Emulation,即可选择设备和屏幕分辨率了。

写在最后的话:App么有必要了,直接做微信网站或者官网手机版,省去n多维护成本及开发成本。重点是:管理方便,平台统一。

附参考


CSS3 Media Queries模板
CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足,如果满足就调用相应的样式。打个比方来说,如果你的Web页面在960px的显屏下显示,那么首先会通过CSS3 Media Queries进行查询,看看有没有设置这个条件样式,如果找到相应的,就会采用对应下的样式,其他的设备是一样的道理。下面具体看看“max-width”和“min-width”模板:
使用max-width
@media screen and (max-width: 600px) { //你的样式放在这里.... }
使用min-width
@media screen and (min-width: 900px) { //你的样式放在这里... }
max-width和min-width的混合使用
@media screen and (min-width: 600px) and (max-width: 900px) { //你的样式放在这里... }
同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用,这个主要用在iPhone,iPads设备上,比如像下面的应用:

iPhone和Smartphones上的运用


/* iPhone and Smartphones (portrait and landscape) */
@media screen and (min-device-width : 320px) and (max-device-width: 480px) 
{ 			//你的样式放在这里... 		} 

max-device-width指的是设备整个渲染区宽度(设备的实际宽度)

iPads上的运用


/* iPads (landscape) */ @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { //你的样式放在这里... } /* iPads (portrait) */ @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { //你的样式放在这里... }
针对移动设备的运用,如果你想让样式工作得比较正常,需要在“”添加“viewport”的meta标签:

有关于这方面的介绍大家可以看看这个blog上进行的的移动端开发的相关总结。
调用独立的样式表
你可能希望在不同的设备下调用不同的样式文件,方便管理或者维护,那么你可以按下面的这种方式进行调用:

CSS3 Media Queries在标准设备上的运用


下面我们一起来看看CSS3 Meida Queries在标准设备上的运用,大家可以把这些样式加到你的样式文件中,或者单独创建一个名为“responsive.css”文件,并在相应的条件中写上你的样式,让他适合你的设计需求:
1、1024px显屏
@media screen and (max-width : 1024px) { /* CSS Styles */ }
2、800px显屏
@media screen and (max-width : 800px) { /* CSS Styles */ }
3、640px显屏
@media screen and (max-width : 640px) { /* CSS Styles */ }
4、iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) { /* CSS Styles */ }
5、iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) { /* CSS Styles */ }
iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* CSS Styles */ }
现在有关于这方面的运用也是相当的成熟,twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下:
// Landscape phones and down 	@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet 	@media (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop 	@media (min-width: 768px) and (max-width: 980px) { ... }
// Large desktop 	@media (min-width: 1200px) { .. } 

在bootstrap中的responsive.css采用的是网格布局,大家可以到官网查看或下载其源码进行学习。

更新CSS3 Media Queries模板查询


1、Smartphones (portrait and landscape)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 	/* Styles */ } 
2、Smartphones (landscape)
@media only screen and (min-width : 321px) { 	/* Styles */ } 
3、Smartphones (portrait)
@media only screen and (max-width : 320px) { 	/* Styles */ } 
4、iPads (portrait and landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 	/* Styles */ } 
5、iPads (landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 	/* Styles */ } 
6、iPads (portrait)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 	/* Styles */ } 
7、iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { 	/* Styles */ } 
8、640px显屏
@media screen and (max-width : 640px) { 	/* CSS Styles */ } 
9、800px显屏
@media screen and (max-width : 800px) { 	/* CSS Styles */ } 
10、1024显屏
@media screen and (max-width : 1024px) { 	/* CSS Styles */ } 
11、Desktops and laptops
@media only screen and (min-width : 1224px) { 	/* Styles */ } 
12、Large screens
@media only screen and (min-width : 1824px) { 	/* Styles */ } 
13、
@media only screen and (min-width: 320px) {    /* Small screen, non-retina */  }

那么有关于CSS3 Media Queries模板的相关介绍就说到这里了,最后希望大家喜欢。如果你觉得这篇文章对你有所帮助或者比较有实用价值,您可以把他推荐给您的朋友,如果你有更好的分享可以在下面的评论中直接与我们一起分享您的经验。

原文地址:网站多平台自适应模板 by 雪鼬博客

标签:自适应

评论已关闭