HTML让网页自动适应电脑手机屏幕大小

作的网页除了在PC端浏览，在现在移动端量巨大的时代下，如何做好PC端与移动端的自适应，是每个程序必须要需要考虑的事情。

举例

下面是没有加适应的情况：

前端开发中，移动端不同设备的屏幕适配一直是个绕不开的技术话题。目前比较流行的方案是类似淘宝的flexible。其原理是使用js动态计算html的font-size，利用rem来实现不同宽度的适配。使用js方案虽然比较成熟，但也有它的一些缺点，比如性能损耗，由于js的阻塞加载和动态计算，页面不免会出现卡顿和闪屏的现象，影响用户体验。今天我们不使用js，完全使用css来实现适配，来看看是怎么实现的吧！

移动端屏幕适配

方案一：使用meta标签

在html的head中插入下面的meta标签：

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

没错，是两个viewport标签。width=device-width写在上面，width=375写在下面，375就是以哪个设备宽度为基准，现在大部分设计稿都是以iphone6的375宽度为基准做2倍图。加了上面两个mata标签，后面的css就可以完全使用px为单位直接使用，整个页面会自动按设备宽度进行等比例缩放。看下面的演示效果：

方案二：使用css的calc计算属性

在css中定义html的font-size为：calc(100vw/3.75)，calc、vw能兼容ios8+和android4.4+，可放心使用，如下：

html {
  font-size: calc(100vw/3.75);
  -webkit-text-size-adjust: 100%;
}

然后在css中，就可以将所有的px单位除以100，得到rem单位了。比如：

.row>div {
  float: left;
  width: .82rem;
  height: .82rem;
  text-align: center;
  line-height: .82rem;
  margin-left: .05rem;
  background-color: #f0f0f0;
}

上面的rem单位转换，建议大家可以使用px2rem这个插件完成，webpack、vscode都能支持。设置时将rootFontSize 设为100即可。

设置px2rem参数

在vscode中，可以使用ctrl+shift+p,选择px2rem就可以将当前页面的px全部转换为rem。

px2rem在vscode中的使用方法

当然，rem和px可以相互共存，比如我标题栏就想要44px高，这样就不会缩放了。看下面的演示效果：

纯css实现移动端适配

总结：两种方案如何选择

方案一，直接使用html的mata实现整个页面的缩放，比较适合那些宣传单页或全屏游戏交互类，无法实现px与rem共存的情况。

方案二，利用了rem来缩放，可实现与px共存，在借助px2rem的情况下，能高效方便的实现适配。

综合考虑，小编建议使用方案二。你，学会了吗？

PC端进行网页制作时，经常使用固定像素并且内容居中的网页布局，为了适应小屏幕的设备，在移动设备和跨平台(响应式)网页开发过程中，多数使用流式布局，下面我们就对流式布局进行详细介绍。

流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下: 目标元素宽度/父盒子宽度=百分数宽度下面通过一个案例来演示固定布局如何转换为百分比布局，如demo4-1.html 所示。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定布局转换为百分比布局</title>
	<style type="text/css">
		body>*{ width: 980px; height:auto; margin:0 auto;
				margin-top:10px;
				border:1px solid #000; padding:5px;}
		header{ height:50px;}
		section{ height: 300px;}
		footer{ height:30px;}
		section>*{ height:100%; border:1px solid #000; float:left;}
		aside{ width:250px;}
		article{ width:700px; margin-left:10px;}
	</style>

</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
	<aside>aside</aside>
	<article>article</article>
</section>
<footer> footer</footer>
</body>
</html>

打开Chrome浏览器访问demo4-1.html，页面效果如下图所示。

可以尝试改变浏览器窗口的大小，页面元素的大小不会随浏览器窗口改变，如下图所示。

下面修改demo4-1样式代码，将所有宽度修改为百分比的形式，具体如下:

	<style type="text/css">
		body>*{ width:95%; height:auto; margin:0 auto; margin-top:10px;
               border:1px solid #000; padding :5px; }
		header{ height:50px; }
		section{ height: 300px; }
		footer{ height:30px;}
		section>*{ height:100%; border:1px solid #000; float:left; }
		aside{ width:25.510204%; /*250÷980*/}
		article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}
	</style>

刷新页面，缩小浏览器，页面按百分比随浏览器逐渐缩小，显示完整，页面效果如下图所示：

在线咨询

上一篇：三步搞定公众号弹幕
下一篇：轻松实现HTML表格拖拽和排序，实现复杂交互式数据表变得更简单

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。