这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结，非常具有实用价值，需要的朋友可以参考下1使用meta标签viewportH5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备。

userscalable = noquot ltlink rel=quotstylesheetquot type=quottextcssquot href=quotcssresetcssquot ltheadltbody ltdiv class=quotwrapquotltdivltbodylthtml代码解析由于使用不同设备打开网页时，宽度。

5 PhotosPhotosy是非常适合展示摄影作品的WordPress主题着陆页模板该模板包括了几个着陆页面布局，最大的特色是长滚动的单页面布局亮点在于包括了carousalInstagram提要博客文章和带有多个选项的栏目该模板具有全画布。

一自适应网页设计 自从2010年，Ethan Marcotte提出了 “自适应网页设计”Responsive Web Design这个名词，指可以自动识别屏幕宽度并做出相应调整的网页设计他制作了一个 范例，里面是福尔摩斯历险记六个主人公的。

先给你写一套代码，之后再来解释哈css部分aa display flex 使用flex布局，可以轻易获得水平布局 alignitems center 垂直方向居中 justifycontent center 水平方向居中 height 200px。

首先你要在html页面头部加上下面的代码，其次你要把页面中的宽度修改为百分比，不能不用固定尺寸，一些小的模块可以用固定尺寸再就是css中要应用到媒体查询，也就是@media，不懂可以百度ltmeta name=quotviewportquot content=。

第一种，伪“感应式”设计HTML5模板类方案上图是HTML5模板类测试结果，依次是iPhone4iPhone5iPhone6 可以看出iPhone4时，变形最严重，iPhone5效果最好，iPhone6是等比例缩放后，两侧边缘，有些像素显示不了因此。

05 在HTML文件中加上对样式文件的引用，返回文件夹，双击HTML文件，发现浏览器的变化会引着图片一起变化，自适应屏幕的大小。

html5中是通过css3的backgroundsize来控制自适应的直接在图片代码里面设置style，例如ltimg src=quotxxxjpgquot style=quotmaxwidth100%quot2要么给图片统一一个class名例如responseimg，然后在css文件里面设置这个class h。

可以用JS监控屏幕大小，然后调整Canvas的大小在代码中加入JS windowresizeresizeCanvas function resizeCanvas canvasattrquotwidthquot， $windowget0innerWidth canvasattrquotheightquot， $window。

只有内嵌css有效，外部css会出现拉伸的情况，所以有两种方案 var myCanvas = quotltcanvas id=#39myCanvas#39 width=#39quot + screenavailWidth + quotpx#39 height=#39quot+ screenavailHeight + quotpx#39ltvanvasquot。

而且如果一个网站有多个portal入口，会大大增加架构设计的复杂度于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局layout。

通过下面的代码你可以自己动手修改博客的模板，尽显非凡个性，不过小心弄不好可就面目全非了ltSTYLE type=textcss body backgroundurl页面背景图片 repeat scroll！important logo backgroundurl题图logo图片。

1，输入positionfixedtop0left0将整个div固定在屏幕的顶部和左侧2输入width100％height100％min－width1000px这个可以适合div的高度和宽度，而min－width是为了实现让屏幕宽度在1000px以内时。

头部要加的是这个，放在ltheadlthead标签里，这是初始化手机屏幕的ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=10， maximumscale=10， userscalable=noquot 你写的这段是要放在所有css。