一次写移动端页面图片自适应的源码

记录一次写移动端图片自适应宽度的源码

<!DOCTYPE html> 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>千学阁</title>
</head>
<style>
	*{margin:0px;padding:0px;}
	html,body{
		width:100%;	
		height:100%;	
	}
	#bg{
		width:100%;
		max-width:720px;
		height:100%;
		margin: 0 auto;
		overflow: hidden;
		//background: url(bg.jpg) no-repeat center top;
		//background-size:cover;
	}
	#bg img{
		width:100%;
		max-width: 720px;
		height:auto;
	}
	ul{
		float: left;
		position: fixed;
        bottom: 5px;
	    width:100%;
	    max-width: 720px;
	    padding:0;
	    margin:0;
	    border:0;

    }      
    ul li{
        display:inline-block;
        list-style:none;
        height:40px;
        line-height:40px;
        text-align:center;
        width:22%;
        margin-left: 0.5%;
        border: 1px solid #fff;
        background:#FF99CC;
        border-radius:5px;
    }
    ul li a{
    	display:block;  
    	width:100%;
    	height: 100%;
    	text-decoration:none;
    	font-size: 13px;
    	font-weight:bold;
    	color:#fff;
    }
</style>
<body>
	<div id="bg">
	<ul>
			<li><a href="http:/www.qianxuege.com/">test1</a></li>
			<li><a href="http:/www.qianxuege.com/">test2</a></li>
			<li><a href="http:/www.qianxuege.com/">test3</a></li>
			<li><a href="http:/www.qianxuege.com/">test4</a></li>
		</ul>
		<img src="bg.jpg" alt="一次写移动端页面图片自适应的源码" alt="千学阁" />	
	</div>
</body>
</html>

<meta  name="viewport" content="width=device-width, initial-scale=1.0">
name="viewport" 指的是移动端的浏览器,看到这段代码,马上就知道这是移动端浏览器。
width=device-width,指的是移动端页面的宽度等于设备的宽度。
initial-scale=1.0指的是
页面将是原本尺寸展示,如果后面是2.0的话,就是是将页面放大两倍

移动端自适应一定要加这句话

一次写移动端页面图片自适应的源码:等您坐沙发呢!

发表评论

表情
还能输入210个字