HTML5里面怎样自动适应手机屏幕的高度

html-css010

HTML5里面怎样自动适应手机屏幕的高度,第1张

HTML5里面自动适应手机屏幕的高度方法：

使用meta标签，这也是普遍使用的方法

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

解释该标签的含义：

height=device-width  就是设置页面的高度，为手机的高度

首先需要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: 0margin: 0}div {width: 100%height: 300pxbackground: url('images/slide_01_640x340.jpg') no-repeatbackground-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.最终的效果是这样：

解决方案1：

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

</>，其次你要把页面中的宽度修改为百分比width=device-width，也就是@mediainitial-scale=1"

解决方案2：

建议你看一下网上的教程或者案例，自己对比学习再写。

建议：如果是小白的话，要不然不会自适应屏幕大小的，只要你编写的html代码符合html5规则就行html5不是转化的，建议你看一下html5标签文档

解决方案3：

看你之前是怎么做的，最好都调整成百分比的，这样最省事。