HTML5 Viewport Meta Tag

最新推荐文章于 2024-05-22 19:36:03 发布

前端老码农

最新推荐文章于 2024-05-22 19:36:03 发布

阅读量107

点赞数

分类专栏：前端文章标签： css html css html5

原文链接：https://www.mk2048.com/blog/blog.php?id=hhji1jbbkikj&title=HTML5+Viewport+Meta+Tag

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/

http://developer.blackberry.com/playbook/html5/documentation/viewport.html

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag?redirectlocale=en-US&redirectslug=Mobile/Viewport_meta_tag

https://msdn.microsoft.com/en-us/library/windows/desktop/bb152361(v=vs.85).aspx

http://htmlref.com/

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

<style type="text/css">
.textfield_ {
	border: 0px;/**/
	font-size: 1.5em;
	width:200px;
	height: 30px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-weight: bold;
	background-repeat: no-repeat;
	background-position: center;
	color: #42261A;
	font-family: Arial, Helvetica, sans-serif;
}
.abc{ width:100%;align:right;valign:top;padding-left:50%;}
/* 设置了浏览器宽度不大于 2160px 时 abc 显示1200px宽度 */  
@media screen and (max-width: 2160px) { 
.abc {padding-left:800px;} 

} 
/* 设置了浏览器宽度不大于 1080px 时 abc  */ 
@media screen and (max-width: 1081px) { 
.abc {padding-left:450px;} 
} 
/* 设置了浏览器宽度不大于720px时 abc  */ 
@media screen and (max-width: 768Px) { 
.abc {padding-left:330px;} 
} 
/* 设置了浏览器宽度不大于720px时 abc  */ 
@media screen and (max-width: 720px) { 
.abc {padding-left:300px;} 

} 
/* 设置了浏览器宽度不大于500px时 abc  */ 
@media screen and (max-width: 640px) { 
.abc {padding-left:250px;} 
.textfield_{font-size: 1.1em;width:150px;	height: 18Px;}
} 
/* 设置了浏览器宽度不大于500px时 abc  */ 
@media screen and (max-width: 414px) { 
.abc {padding-left:160px;} 
.textfield_{font-size: 1.0em;width:150px;	height: 18Px;}
} 
/* 设置了浏览器宽度不大于500px时 abc  */ 
@media screen and (max-width: 320px) { 
.abc {padding-left:120px;} 
.textfield_{font-size: 0.9em;width:150px;	height: 18Px;}
} 
</style>

</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">
<div align="center"><img width="100%" src="images/top.png" border="0"></div>
<div style="float:left;position:absolute;align:center;z-index:9;padding-top:11%;">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
	    <tr>
	      <td class="abc">
	      	<input class="textfield_" name="textfield" type="text" id="textfield" value="10330" height="14"  />
	      </td>
	    </tr>
	    <tr height="8px;">
	    	<td colspan="2"></td>
	    </tr>
	    <tr >
	      <td class="abc">
	      	<input class="textfield_" name="textfield2" type="text" id="textfield2" value="210000055878781" height="14"  />
	      </td>
	    </tr>
	   
		</table>
	</div>
<div style="align:center;float:left;z-index:-1;" ><img width="100%" src="images/mid.png" border="0">
	
	
</div>
<div align="center"><img width="100%" src="images/buttom.png" border="0"></div>

更多专业前端知识，请上【猿2048】www.mk2048.com

前端老码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Viewport Meta Tag

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/U...
复制链接

扫一扫