一，最近在做项目，写移动端的网页，主要是自适应的问题引导程序。等前端框架用的不好，又不想耽误时间，不能自适应很烦人，这里给大家介绍下我的方法，

也是结合了很多人的思路。

1.在头部加入这样的一行代码：

元内容='宽度=设备宽度，初始比例=1.0，更大比例=1.0，用户可缩放=0 '名称='视口'

这句话是自动设置缩放，然而，它并不能完全适应所有的手机，并且你在用浏览器手机模式调试的时候可能正常，但是换到真实的手机端其实是不正常的。所以我们还要进行改动。

2.这里推荐大家在用马金，填充，字体大小，等属性的时候用雷姆替代px，你可能对雷姆比较陌生，这里我提供好了一段射流研究…代码，直接引入即可，不需要纠结雷姆是怎么回事，关于原理，我再写篇博客做介绍，这篇博客讲怎么使用。就是以下的这段射流研究…代码，再写网页的时候放入超文本标记语言中即可。下面代码中的640指的是手机的屏幕宽度，一般来讲市面上的手机屏幕的宽度更大是640px，所以这里用i=640指代屏幕的更大宽度，最小是320px，然后通过引用下面的射流研究…你就可以书写自己的网页了，要记得本射流研究…的1rem=100px哦，其实是为了好换算，比如font _ size:14px我们就可以写成，font_size:0.14rem。

脚本

！函数(n){

vare=n.document，

t=e.documentElement，

i=640 .

d=i/100 .

o='orientationchange'inn？orientationchange':'resize '，

a=function(){

varn=t.clientWidth | | 320

n640(n=640)，

t.style.fontSize=n/d 'px '

};

e .addevent listener(n . addevent listener(o，a，1)，e . AddEventListener(' DomContentLoaded '，a，1))

}(窗口);

/script

3.好了，接下来为大家展示一个轮播图效果来说明一下，先上代码

！doctypehtml

超文本标记语言

头

metacharset='utf-8 '

元内容='宽度=设备宽度，初始比例=1.0，更大比例=1.0，用户可缩放=0 '名称='视口'

标题无标题文档/title

脚本src=' images/jquery-1。js '/脚本

脚本src=' images/TouchLide。js '/脚本

脚本src=' images/rem。js '/脚本

风格

/*横幅轮播切换星号*/

车身{margin:0auto！重要；更大宽度宽度：640像素最小宽度width :320 pxbackground : # fff！重要；overflow-x :隐藏；}

#横幅{ position:relative}

#横幅。HD {位置：；宽度：;文本对齐：中心；底部：2%；左侧：0}

#横幅。hdli { width :0.2 remheight :0.2 remorder :1 pxsolid # fff边界半径：50%;显示：内嵌块；margin:04px}

#横幅。hdli。在{ background : # 9e 5 FD 4；边框颜色： # 9e 5 FD 4；}

/style

scripttype='text/javascript '

$(function(){

/*根据旗帜个数增加下方指示点*/

n=$(. ibanner . bdli ').size()；

for(m=0；Mn；m ){

$(. ibanner . HD ').追加('李/李')；

}

/*横幅切换*/

if($(').伊班纳').长度){

触摸幻灯片({幻灯片单元： ' #横幅'，主单元： ' .bd '，autoPlay:true，effect:'leftLoop '，intertime 33605000 })；

}

});

/script

/head

身体

！-上部轮播开始-

pid='banner'class='ibanner '

p class=' Tempwrap ' style=' overflow 3360 hidden；位置：相对；'

ul class=' BD ' style=' width :3840 px；位置：相对；

飞越：隐藏；padd :0 pxmargin :0 px过渡持续时间：200毫秒；

transform : translatex(-2560 px)；'

！-此处添加伦比图片-

列表样式=' display : table-cell；垂直对齐：顶；宽度：

640pxa

href='https://rgtk15。快尚。cn/bs/im.htm？cas=113477 _ _ _ 235266 fi=115470 ' img

src='images/banner11.jpg'/a/li

里

style=' display :表格单元格；垂直对齐' : top'宽度：640px'a

href='https://rgtk15。快尚。cn/bs/im.htm？cas=113477 _ _ _ 235266 fi=115470 ' img

src='images/banner12.jpg'/a/li

里

style=' display :表格单元格；垂直对齐' : top'宽度：640px'a

href='https://rgtk15。快尚。cn/bs/im.htm？cas=113477 _ _ _ 235266 fi=115470 ' img

src='images/banner13.jpg'/a/li

里

style=' display :表格单元格；垂直对齐' : top'宽度：640px'a

href='https://rgtk15。快尚。cn/bs/im.htm？cas=113477 _ _ _ 235266 fi=115470 ' img

src='images/banner14.jpg'/a/li

里

style=' display :表格单元格；垂直对齐' : top'宽度：640px'a

href='https://rgtk15。快尚。cn/bs/im.htm？cas=113477 _ _ _ 235266 fi=115470 ' img

src='images/banner15.jpg'/a/li

/ul

/p

ulclass='hd '

/ul

/p

！-上部轮播结束-

/body

/html

本文转载自中文网