Question

HTML网页如何完美的适配到移动设备上

在pc端开发了一系列html网页，但是在移动设备上适配得不是太好，尤其是Android上，页面上的一些图片没有显示在正确的位置，请问圈里哪位大神明白的，跪求详细讲解...

Answer 1

1、在已安装的电脑桌面新建一个Word文档（演示文稿以Office2007系列为主），然后打开新建的文档，输入文字。

2、点击Word文件左上方-->另存为（A）-->其他格式-->类型选择为“网页（*.html,*htm）”-->输入文件名-->保存到桌面。

3、打开《Word超链接演示.htm》文件，在对比《Word超链接演示.doc》文件，相同的内容，不同的展示。

4、选中要链接的文字，鼠标右键，单击超链接。

5、按住Ctrl键，并单击超链接文字，就可以打开超链接网页百度首页了。

Answer 2

如果要完美适应PC和移动设备，有两种方式，一个是给移动设备单独开发一套页面，在网站首页上用脚本判断访问页面的设备类型然后跳转，比如在PC首页加上脚本判断，当用手机访问时则自动跳转到移动版的首页上。第二种方式是采用自适应框架对页面进行开发，比如bootstrap，一套页面可以适应各种类型的终端，这点可以看一下bootstrap中文官网了解一下，看看那些网站实例时放大缩小一下浏览器窗口大小就知道自适应的效果如何了。

Answer 3

完美适配是要一步一步调试的。
首先，你的宽度不能写死。
其次，使用栅格化有利于匹配移动端。
再者，可以使用@medie进行修改匹配样式。
总之pc到移动不是一步走通的

Answer 4

1，做适配，尽量不要用定位，不要脱离文档流，
2.弹性盒模型很nice做适配；
3.移动设备主要是屏幕的宽高等，主要是是宽高，字体大小等，可以采用rem布局

Answer 5

HTML网页兼容移动设备，首先在制作的时候就要考虑响应式布局，在PC端怎么显示，在移动端怎么显示，都要前期做好规划。

实现响应式布局可以用前端框架bootstrap来实现，这个比较快速上手。