h5 移动端适配3中方式

最新推荐文章于 2022-12-02 14:41:33 发布

心郎

最新推荐文章于 2022-12-02 14:41:33 发布

阅读量717

点赞数

分类专栏：前段_css

本文链接：https://blog.csdn.net/u011301203/article/details/70038056

版权

前段_css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<style>
			html{
			}
			body{
				background-color: royalblue;
				box-sizing: content-box;
			}
			.a{
				height: 19rem;
				width: 19rem;
				background-color: aquamarine;
			}
			.b{
				height: 14rem;
				width: 14rem;
				background-color: chartreuse;
			}
			.c{
				height: 7rem;
				width: 7rem;
				background-color: darkblue;
			}
			
			
			/*
			 * 1 固定写法
			@media only screen and (width: 320px) {
				html {
					font-size: 16px;
				}
			}

			@media only screen and (width: 360px) {
				html {
					font-size: 18px;
				}
			}
			
			@media only screen and (width: 375px) {
				html {
					font-size: 18.75px;
				}
			}
			
			@media only screen and (width: 400px) {
				html {
					font-size: 20px;
				}
			}
			
			@media only screen and (width: 411px) {
				html {
					font-size: 20.55px;
				}
			}
			
			@media only screen and (width: 414px) {
				html {
					font-size: 20.7px;
				}
			}
			
			@media only screen and (min-width: 640px) {
				html {
					font-size: 32px;
				}
			}
			* 
			* */
			
			
			/*
			 * 2 区间写法
			 * @media only screen and (max-width: 320px) {    html {
			        font-size: 16px;
			    }}
			
			@media only screen and (min-width: 321px) and (max-width: 360px) {    html {
			        font-size: 18px;
			    }}
			
			@media only screen and (min-width: 361px) and (max-width: 375px) {    html {
			        font-size: 18.75px;
			    }}
			@media only screen and (min-width: 376px) and (max-width: 384px) {    html {
			        font-size: 19px;
			    }}
			
			@media only screen and (min-width: 385px) and (max-width: 413px) {    html {
			        font-size: 19px;
			    }}
			
			@media only screen and (min-width: 414px) and (max-width: 480px) {    html {
			        font-size: 20.7px;
			    }}
			
			@media only screen and (min-width: 481px) and (max-width: 540px) {    html {
			        font-size: 27px;
			    }}*/
    
			/*
			* 它的页面有一个特点，就是：
				顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变
				中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边
				这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。
				对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：
			 * */
		</style>
	</head>
	<body>
		
		<div class="a">
			<div class="b">
				<div class="c">
					asdasd
				</div>
			</div>
		</div>
		
		<script>
			
			//3 js方式
			window.onload = function () {
				var screenWidth = window.screen.width;
				var widht = document.getElementsByClassName('a')[0];
				var html = document.getElementsByTagName('html')[0];
				html.style.fontSize = (screenWidth/20)+"px";
//				console.log('fontsize= '+fontsize);
				console.log('大盒子宽度= '+widht.offsetWidth);
			}
		</script>
	</body>
</html>

心郎

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
h5 移动端适配3中方式

html{ } body{ background-color: royalblue; box-sizing: content-box; } .a{ height: 19rem; width: 19rem; background-color: aquamarine; } .b{ height: 14rem;
复制链接

扫一扫

专栏目录