2种跨屏响应式网站的开发方式

发布时间:2019年5月15日

跨屏移动(kuaping.com)是国内鲜有的专注于网站跨屏移动技术研究的服务商,最近好几个客户问我跨屏响应式的问题,那么我抽空写一点我对跨屏响应式网页设计的理解。

写跨屏响应式一般有两种方式:

1、自己写;

2、bootstrap框架;

在这里我们主要说说自己写。

写跨屏响应式首先要在head里面加入一行viewport元标签。

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js使其他浏览器版本支持。

http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”>

对于初学者在刚接触跨屏响应式时,可以这样理解跨屏响应式:在浏览器不同宽度或者高度下,网页采用不同的样式。

在写跨屏响应式时,采用@media only screen and (min-width: ***px)and (max-width: ***px){样式代码}而且把跨屏响应式样式代码都写在一起。在代码很多的时候不推荐这么写,我们更倾向于CSS3引入的Media Query模块。其意思就是在探测到不同宽度时引用不同的css文件。

media=”screen and (min-width: 400px) and (max-device-width: 600px)”

href=”***.css”/>

除了这种引用方法之外,还有在css文件中加载,虽然这种我们是不推荐的,但还是提下。

@import url(“***.css”) screen and (max-device-width: 400px);

说完跨屏响应式文件引入等前置条件后,我们简单介绍下布局。

宽度

初学者可以学习的时候在条件范围内可以使用指定像素宽度,但是有一定的基础的时候,一般会使用百分比宽度:width:***px;或者:width:auto;。

文字

文字不能使用绝对大小px,而是使用相对大小em。

body {font: normal 100% Helvetica, Arial, sans-serif;}

以上代码指定,文字大小是默认的100%,即16px。h1 {font-size: 1.5em;}

然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

small {font-size: 0.875em;}

small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

布局

才用流动布局(fluid grid),这样使用的好处在于各个盒子都是浮动的,不是固定不动的,在宽度不够时会自动到下面去,而不会因为宽度不够而溢出隐藏(overflow:hidden;),所以绝对定位(position:absolute;)也要慎用。

图片

实现图片的自动缩放,其实只需要一行代码

img { max-width: 100%;}

但是在某e老版本浏览器中是不支持的,所以只能写成

img { width: 100%; }

此外,在windows系统中,缩放图片时,也有可能引起失真的现象,所以可以添加以下命令img { -ms-interpolation-mode: bicubic; }

或者直接使用imgSizer.js插件,引入插件的代码如下

addLoadEvent(function(){

varimgs=document.getElementById(“content”).getElementsByTagName(“img”);

imgSizer.collate(imgs);

});