html5图片太小怎样适应手机的简单介绍

怎么制作HTML5页面让它适应电脑和手机的尺寸

1、通过设置viewport参数 使用css3中的缩放 两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例，然后进行缩放。但是因为目前手机种类繁多，浏览器种类也很多，所以每种方法各自都有不少的问题。

2、解决方案1：首先要在html页面头部加上下面的代码；viewport，不懂可以百度；content=，一些小的模块可以用固定尺寸；meta ， name=。再就是css中要应用到媒体查询，不能不用固定尺寸。

3、这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal(入口)，会大大增加架构设计的复杂度。

4、首先你要在html页面头部加上下面的代码；viewport，不懂可以百度；content=，一些小的模块可以用固定尺寸；meta ， name=。再就是css中要应用到媒体查询，不能不用固定尺寸。

5、针对每个屏幕尺寸，在页面结构不变的前提下，重新写了一遍样式覆盖原有的而已。

6、var rem = html.offsetWidth / 4；html.style.fontSize = rem + px媒体查询 媒体查询正是为解决网页适应手机屏幕。

相关问答

Q1: html5设置图片自适应屏幕宽度

最后在title标签下面插入style标签（如下图所示），接着在style标签中编辑css样式，如下图所示，img{width：100px；height：auto}，这里表示把图片设置为100px宽、auto表示高度根据图片比例自适应。设置图片大小就完成了。

用JS调制屏幕大小。CSS 方面：去掉所有元素的外间距、内边距，html 和 body 宽高设为 100%，canvas 元素 display 设为 block。JS 方面：监听窗口的 resize 事件，在窗口大小改变的同时调整 canvas 的大小。

可以用JS监控屏幕大小，然后调整Canvas的大小。

Q2: html5手机页面背景图片自适应大小问题

HTML网页的开发中，需要对大小不一的屏幕兼容，使图片在不同的设备中可以展示预期的效果。

如果通过css设置背景图，那么图片尺寸要足够大，目前大宽屏1920左右，所以宽度最好设置为1920，然后居中；如果通过div嵌入图片，那么将此div设置成绝对定位，z-index：-1。

background：url(背景.gif) repeat-y； 这个是背景纵向重复。

html5中是通过css3的background-size来控制自适应的。

首先看你的背景图片大小，如果很大的话，一般情况下很多显示器都会显示的合适。如果是想适应移动设备的，用一个CSS3属性 background-size：cover；就可以了，可以将背景图根据窗口大小铺满整个浏览器窗口。

使用百分比，比如 img src=../a.ipgstyle=width：50%/ 这样就会保持屏幕的50%的宽度。

html5图片太小怎样适应手机的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、html5图片太小怎样适应手机的信息别忘了在本站进行查找喔。