很经常看到手机端的网页都是等比例缩放的,比如在宽度是640px的可以满屏查看,在宽度是320px的一样是满屏查看,而且不用进行滚动,唯一的区别就是图片文字以及排版等进行等比例的缩放。那这个是怎么做到的呢?

首先手机端的文件头部必须增加一个手机端的代码说明

    <meta content="width=device-width,user-scalable=no" name="viewport" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

或者

<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

其实两个应该都一样。

然后外面box可以设置max-width:640px来进行说明最大可以增长到640像素。

不过手机开发里面的定义等一般都是直接用百分比,这样好让后面可以进行等比例缩放,如果直接定死一个固定的宽度,就达不到后面的效果,这其中包括文字的大小等。

下面上一个demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta content="width=device-width,user-scalable=no" name="viewport" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

	<title>Document</title>
	<style>
	.ceshi{
		bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
max-width:640px;
right: 0;
top: 0;
z-index: 2;
	}
	</style>
</head>
<body>
	<div class="ceshi"><img width="100%" src="/wp-content/uploads/2016/05/20140303191806-1541116668-300x106.png" /></div>

</body>
</html>

然后这边需要说明的是图片那边可以设置宽度显示百分百,然后图片就可以按照屏幕的实际大小,当然是在640像素以内,因为外层box的最大像素就是640像素。在这个范围内进行变化,图片的显示形式也会进行等比例缩放。

但是如果图片当作背景图片来显示的话,那么就算你里面设置上下左右居中。如

background: url('/wp-content/uploads/2016/05/20140303191806-1541116668-300x106.png') center center no-repeat;

但是这个图片还是不会进行缩放,它显示的是实际图片的规格。如果外层box的大小不够。那么他会进行截取中间图片的大小。

相关文章:

  • 暂无相关文章