html5

这个不一定要在手机上查看 你使用google浏览器 也有手机模式测试详情你可以自己查查百度 360 火狐 有手机模式测试吗? 没有 兼容一直接安装一个google浏览器还有一种方法就是你在你的电脑里安装IIS把你做好的html5文件放到IIS里然后查询你本地IP 然后在手机浏览器里直接输入你的IP就可以在手机上访问了呵呵 建议你简单点 直接使用google浏览器我的也做前端开发的 相应式网站经常做 安装啦，然后呢？点哪块？/? 你可以选择手机设备类型 默认的是苹果5你看到你的截图了 你还需要点击下右上角的点击下这个然后选择Emulation如果还不懂就加我HI吧 会了，谢谢~~~

1.设定字体和大小，直接在编辑器里边即可编辑。如下图：2.如果想要添加样式的文字，字体或者样式，建议现在其他地方编辑好，直接复制过来就行了。例如：

系统是否是win8、win7的？r如果是建议使用2.2版本的，2.5在以上系统不行wampserver用localhost打不开，你可以试一下127.0.0.1如果是这样的话，就要设置一下了，打开httpd.conf文件，定位 Options FollowSymLinks AllowOverride None Order deny,allow Deny from all把“Deny from all”改为“Allow from all”然后定位到# onlineoffline tag - don't remove Order Deny,Allow Deny from all Allow from 127.0.0.1把“Deny from all”改为“Allow from all” 打开phpmyadmin配置文件，我wamp安装在D盘，所以我的文件目录是D:\wamp\alias\phpmyadmin.conf，定位到 Options Indexes FollowSymLinks MultiViews AllowOverride all Order Deny,Allow Deny from all Allow from 127.0.0.1把“Allow from 127.0.0.1”改为“Allow from ::1”重启服务，轻按F5，localhost已经可以访问了。

安装步骤：1、控制面板-系统和安全-管理工具-Internet信息服务（IIS）管理工具，打开运行。如下图：2、双击内页中的ASP,即显示ASP的设置内容，",然后在"Behavior(行为)"组中将"Enable Parent Paths(启用父路径)"设置为True即可。3、操作-基本设置-物理路径选为你文档的路径-连接为-特定用户-你的用户名和密码（登陆操作系统的用户名和密码）（切记：一定要设密码，否则这一步通不过） 。绑定-编辑-IP地址：全部未分配端口：80。4、Default Web Site-右键-编辑权限-安全-编辑-添加Everyone且Everyone的权限为完全控制。5、默认文档-添加index.asp。  

自适应宽度： td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断，保持全部 */} 自适应高度 table { table-layout: fixed; width: 100%; }

图片分为背景图片和通过img标签引入的图片，前者可以通过media query自动的切换不同分辨率的版本，但是在不支持background image size的浏览器中背景图片无法无级的调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但是没法儿获得两张分辨率中间大小的版本），而且在很多情况下（比如cms中）并不适合用背景图片。如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片， 宽度> 768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。响应式设计中对于图片的考虑应该从布局设计就开始，尽量使图片在各个窗口宽度下的尺寸不要相差过大，通过排布的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。

touchMove 要结合使用touchstar,touchend进行判断的。没有做过类似的东西，但是下面的是仿微信图片浏览的代码，写了注释，希望对你有点帮助！<script>function imgreset(){ $(this).css3Animate({ width: imgoldw+"px", //x:0, //y:0, time: "0ms", callback: function () { pagex1_s=null;pagey1_s=null;pagex2_s=null;pagey2_s=null;pagex1_e=null;pagey1_e=null; pagex2_e=null;pagey2_e=null;pagexm1_s=null;pageym1_s=null;pagexm1_e=null;pageym1_e=null; dm=0;dn=0; imgneww=imgoldw } }); } var imgoldw=320;//获取图片寛度 var imglength=$(".imgbox").length;//获取图片个数 var demos = document.getElementById("container"), spirit, startScale, startRotation; var dm=0,dn=0,imgneww=imgoldw,ismove=false,pic_c=0; var body_w=$("body").width(); var body_h=$("body").height(); var pagex1_s,pagey1_s,pagex2_s,pagey2_s,pagex1_e,pagey1_e,pagex2_e,pagey2_e,pagexm1_s,pageym1_s,pagexm1_e,pageym1_e; function touchStart(e) { //e.stopPropagation(); e.preventDefault(); if(e.touches.length == 1){ ismove=true; var touch1 = e.touches[0]; pagexm1_s = touch1.pageX; pageym1_s = touch1.pageY; } if (e.touches.length == 2){ var touch1 = e.touches[0]; pagex1_s = touch1.pageX; pagey1_s = touch1.pageY; var touch2 = e.touches[1]; pagex2_s = touch2.pageX; pagey2_s = touch2.pageY; left = Math.min(pagex1_s, pagex2_s), top = Math.min(pagey1_s, pagey2_s), width = Math.abs(pagex1_s - pagex2_s), height = Math.abs(pagey1_s - pagey2_s); } } function touchMove(e){ //e.stopPropagation(); e.preventDefault(); if (ismove&&e.touches.length == 1){//单点触摸 var touch1 = e.touches[0], pagexm1_e = touch1.pageX, pageym1_e = touch1.pageY, //移动了多少 dx=pagexm1_e-pagexm1_s, dy=pageym1_e-pageym1_s; //是多少 dm=dx+dm; dn=dy+dn; if(imgneww==imgoldw){ $(this).css3Animate({ x:dm, //y:dn, time: "0ms", callback: function () { } }); //如果图未放大，则执行翻页 }else{ //如果图片已经被放大，则可以拖动 $(this).css3Animate({ x:dm, y:dn, time: "0ms", callback: function () { //记录新位置 } }); } pagexm1_s=pagexm1_e,pageym1_s=pageym1_e; } if (e.touches.length == 2){//多点触摸 var touch1 = e.touches[0]; pagex1_e = touch1.pageX; pagey1_e = touch1.pageY; var touch2 = e.touches[1]; pagex2_e = touch2.pageX; pagey2_e = touch2.pageY; //计算两点开始距离 old var oldx=Math.abs(pagex1_s-pagex2_s), oldy=Math.abs(pagey1_s-pagey2_s), //计算两点开始距离 new newx=Math.abs(pagex1_e-pagex2_e), newy=Math.abs(pagey1_e-pagey2_e); if(oldx>newx&&oldy>newy){ var imgw=$(this).width();//获取图片寛度 resizex=oldx-newx;//缩小多少 var resizey=oldy-newy;//缩小多少 if(imgw>imgoldw){ $(this).css3Animate({ width: imgneww-resizex+"px", x:dm, y:dn, time: "0ms", callback: function () { } }); imgneww=imgneww-resizex; }; }else{ var imgw=$(this).width();//获取图片寛度 var resizex=Math.abs(oldx-newx); var resizey=Math.abs(oldy-newy);//缩小多少 if(imgw<640){ $(this).css3Animate({ width: imgneww+resizex+"px", x:dm, y:dn, time: "0ms", callback: function () { } }); imgneww=imgneww+resizex; } } } pagex1_s=pagex1_e,pagey1_s=pagey1_e,pagex2_s=pagex2_e,pagey2_s=pagey2_e; }function touchEnd(e) { e.preventDefault(); var imglength=$(".imgbox").length; var id=parseInt($(this).attr("id").substr(9)); if(ismove&&imgneww==imgoldw&&dm<0&&Math.abs(dm)>body_w/2&&id!=imglength-1){ $.ui.loadDiv('#my_photos_'+(id+1),false,false,'flip'); $(this).css3Animate({ x:0, time: "0ms", callback: function () { dm=0; } }); }else if(ismove&&imgneww==imgoldw&&dm>0&&Math.abs(dm)>body_w/2&&id!=0){ $.ui.loadDiv('#my_photos_'+(id-1),false,false,'flip'); $(this).css3Animate({ x:0, time: "0ms", callback: function () { dm=0; } }); }else{ if(ismove&&imgneww==imgoldw){ $(this).css3Animate({ x:0, time: "0ms", callback: function () { dm=0; } }); } } ismove=false; }function gestureEnd(e) { e.preventDefault(); if (!spirit) return; canvas.removeChild(spirit); spirit = null; startScale = null; startRotation = null; } /* $(".imgbox img").bind("touchstart", touchStart, false); $(".imgbox img").bind("touchmove", touchMove, false); $(".imgbox img").bind("touchend", touchEnd, false); $(".imgbox img").bind("gestureend", gestureEnd, false); $(".imgbox img").bind("tap", imgreset, false); */ </script>

首先要登陆自己的账号，这个工具是免注册的，微信扫一扫就登陆进去了；进去后是模板页面，有很多有趣好玩的模板；点击“我的”进入个人空间；添加新折页。模板中有很多好玩的游戏，所以我们选择做一个相册；可以扫码看一下初始的效果，决定了之后点击“开始制作”；每一个标签页都有自己的内容，可以通过删除和复制自己控制模板的规格；上传素材替换掉模板中的内容；可以实时在手机上预览效果；保存折页的时候记得修改页面上的信息；好的制作者可是会利用这些信息吸引眼球哦~在手机上预览没有问题后就可以直接右上角分享给朋友啦！~

首先需要div布局，HTML布局：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>背景图片自适应</title><style type="text/css">html,body {padding: 0;margin: 0;}div {width:  100%;height: 300px;background: url('images/slide_01_640x340.jpg') no-repeat;background-size: 100%  100%;}</style></head><body><div></div></body></html>2.HTML代码的截图效果：3.自适应最重要的样式如下：<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">width:  100%;background-size: 100%  100%;4.最终的效果是这样：