当前位置:Gxlcms > html代码 > 微网站-使用flexible.js实现移动端设备适配_html/css_WEB-ITnose

微网站-使用flexible.js实现移动端设备适配_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:31人阅读

移动端web开发越来越火,同时移动端适配也是一个很让人头疼的事情,你不能让一个同样大小的元素在不同的设备上都显示一样大小。(iphone6和iphone4下大小肯定是应该不一样的,否则用户体验很差)

下面我将以750px的设计稿为例,分析如何制作一个适配多终端的页面。

首先来看最终的效果图:

iphone6下

pic1.png

iphone4下

pic2.png

你看不同设备上看起来都是和谐的,不同设备,元素的大小都不同。

你所希望的是不是这样的结果呢?这种效果是如何实现的呢?

别急,下面慢慢讲。

首先,我们得了解以下几个概念:

虽然上面列举了很多,但是不要被吓着,其实都很简单的,网上也有非常多的介绍,只要大致了解就可以了。

css像素

物理像素

devicePixelRatio

layout viewport

visual viewport

ideal viewport

2.了解我们使用的库flexible.js

手机淘宝从2014年中开始,全面推行flexible设计。什么叫flexible呢?其实flexible就是responsive的低端形态和基础。

手机淘宝用JS来动态写meta标签,手机淘宝的flexible方案是综合运用rem和px两种单位+js设置scale和html字体。我们可以在GitHub上找到这个项目,可以通过网上查阅资料了解更多。

3.了解一个sublime text插件,加快我们的开发速度 这个不是必须,也可以自己手动计算。大家可以在我之前写的一篇文章中,了解该插件如何安装使用,真的非常非常非常简单,重要的话说三遍~

4.下面就真正开始主题啦

我所做页面的设计稿是750px的,有图有真相。

pic3.png

你看我没有欺骗你吧~

以顶部为例,介绍如何制作,首先还是看设计稿

pic4.png

通过ps获得顶部的高度,在750设计稿上96px,所以我们要用96/(750/10),得到对应的rem值。

.msg-header{    
position: relative;    
padding: 0 0.4rem;    
height: 1.28rem; //96/(750/10)    
line-height: 1.28rem;    
font-size: 0.48rem;    
text-align: center;    
border: 0.026667rem solid #eaeaea;
}

这样就实现了最终想要的结果,是不是很简单。5.最后来看一看我们写的html,css,以及最终生成的html

html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><script src="flexible.js"></script>
<link rel="stylesheet" href="index.css"></head><body><section>    
<p class="msg-header clearfix">        
<a href="javascript:void(0);" class="baseIcon iconBack fl"></a>        
<span>消息</span>        
<a href="javascript:void(0);" class="fr clear">清空全部</a>    
</p></section><section class="container msg-content">    
<p>        
<p>            
<span class="baseIcon iconMsg"></span>        
</p>        
<p class="media-right msg-right">            
<h3 class="clearfix title">平台公告 <span class="fr date">2015-10-11</span></h3>            
<p>2015冬款上新2015冬款上新2015冬款上新</p>        
</p>    
</p>    
<p>        
<p>            
<span class="baseIcon iconMsg"></span>        
</p>        
<p class="media-right msg-right">            
<h3 class="clearfix title">平台公告 <span class="fr date">2015-10-11</span></h3>            
<p>2015冬款上新2015冬款上新2015冬款上新</p>        
</p>    
</p></section></body></html>

css

此处省略初始化的样式.
clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden}
.clearfix{*+height:1%;}
.fl{float: left;}.
fr{float: right;}.
baseIcon{
display: inline-block;
background: url(bgIcon.png);
background-size:6.666667rem 6.666667rem;}
.msg-header{
position: relative;
padding: 0 0.4rem;height: 1.28rem;
line-height: 1.28rem;
font-size: 0.48rem;
text-align: center;
border: 0.026667rem solid #eaeaea;}
.iconBack{
position: absolute;
top: 0.373333rem;
left:0.373333rem;
width: 0.346667rem;
height: 0.533333rem;
background-position: -1.493333rem -1.066667rem;}
.msg-header 
.clear{position: absolute;
right: 0.266667rem;
font-size: 0.4rem;
color: #666;
text-decoration: none;}
.media-left,.media-right{
display: table-cell;
vertical-align: top;}
.media-right{width: 100%;border-bottom: 1px solid #eee;
}.iconMsg{width: 1.253333rem;height: 1.253333rem;
background-position: -2.293333rem 0;
}.media-left{padding: 0.266667rem;
}.msg-right{padding: 0.266667rem;
}.msg-right .title{font-size: 0.426667rem;color: #333;
}.msg-right .date{font-size: 0.293333rem;color: #999;
font-weight: normal;
}.msg-right .desc{margin-top: 0.133333rem;
font-size: 0.346667rem;color: #888;}

页面生成的html,注意flexible帮我们的页面添加了几处修改

pic5.png

好的,微网站—使用flexible.js实现移动端设备适配就介绍到这里,大家可以尝试一下,用过方知其好处。

人气教程排行