移动端布局页面实现

最新推荐文章于 2024-04-11 13:41:02 发布

weixin_37460170

最新推荐文章于 2024-04-11 13:41:02 发布

阅读量507

点赞数 1

分类专栏： ‘行万里路’---工作中整理的实例

本文链接：https://blog.csdn.net/weixin_37460170/article/details/78225548

版权

‘行万里路’---工作中整理的实例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

目前在的手机的大小有很多，所以要做到页面适应每一个手机页面，不仅麻烦，而且不利于后期维护。

解决方法：

<script>
	var pixclPatio = 1 / window.devicePixelRatio;
	document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixclPatio+',minimum-scale='+pixclPatio+',maximum-scale='+pixclPatio+',user-scalable=no" />');
	var html = document.getElementsByTagName('html')[0];
	var pageWidth = html.getBoundingClientRect().width;
	html.style.fontSize = pageWidth / 16 + 'px';
</script>

以上代码是在不同手机上都是按照自己的一像素显示。

主要的代码如下：

<style>
body, h1, h2, h3, h4, h5, h6{ margin:0;}
input{ margin:0; padding:0; border:none; -webkit-appearance: none; outline:none;}
ul{ margin:0; padding:0; list-style:none;}
img{ border:none; vertical-align:top;}
html { width:100%; height:100%; overflow:hidden;}
body{ width:100%; height:100%; overflow:auto; font-size:1rem; font-family: Arial, Helvetica, STHeiTi, sans-serif;}
.clear{ zoom:1;}

.cleae:after{ content:""; display:block; clear:both;}
a{ -webkit-tap-highlight-color: transparent; text-decoration:none;}
.head_list{ width:100%; height:9.975rem; background:url(images/list_banner_bg.jpg) no-repeat; background-size: 16rem 9.975rem;}
.head_list .head_click{ width:1.325rem; height:1.2rem;position:fixed; right:0.75rem; top: 0.375rem;}
.head_list .head_control{ width:2.1rem; height:2.1rem;position:fixed; left:1rem; top:2.35rem;}
.head_list .list_logo{ width:100%; height:5rem;}
.head_list .list_logo img{width:7.9rem; height:1.2rem; padding:2.175rem 0 0 4.05rem;}
img{ width:100%;}
.head_list .list_search{ width:15.15rem; height:1.55rem; background-color:#eaeaea; margin-left:0.5rem; border-radius:0.15rem;}
.list_search form{ width:14.8rem; height:1.175rem; padding:0.175rem;}
.list_search .list_search_input{ float:left; width:12.2rem; height:1.175rem; font-size:0.5rem; line-height:1.175rem; background:#fff;padding-left:0.3rem;border-radius:0.15rem 0 0 0.15rem;}
.list_search .list_search_submit{ float:left; width:2.3rem; height:1.175rem; font-size:0.5rem; line-height:1.175rem; color:#fff;   border-radius:0 0.15rem 0.15rem 0; background:url(images/list_search.png) no-repeat 0.25rem 0.375rem; background-size:0.375rem 0.375rem; background-color:#f26820;}
.head_list .nav_list{ width:12.05rem; height:2.25rem; padding:0.7rem 2rem 0.6rem 2rem;}
.head_list .nav_list .nav_item{ float:left; width:2.325rem; height:0.925rem; font-size:0.5rem; color:#5a5a5a; background:url(images/bg.png) no-repeat; background-size:2.35rem 0.95rem; line-height:0.925rem; text-align:center; margin:0 0.275rem 0.275rem 0.275rem; border-radius:0.15rem;}
.head_list .nav_list .nav_item:hover{ color:#f24d18;}
.main_list{ width:100%; padding:1.75rem 1rem 0 1rem; border-sizing:border-box;}
.main_list .main_item{ float:left;  width:6.575rem; height:3.675rem; margin-right:0.875rem; padding-bottom:0.75rem;}
</style>
</head>

<body>
<header class="head_list">
	<div class="head_click"><img src="images/icon_click1.png" alt="" /></div>
    <div class="head_control"><img src="images/control.png" alt="" /></div>
	<div class="list_logo"><img src="images/logo.png" alt="" /></div>
    <div class="list_search clear">
    	<form action="" method="post">
        	<input type="text" class="list_search_input" placeholder="爱家乐风扇" />
            <input type="submit" class="list_search_submit" value="搜索" />
        </form>
    </div>
    <nav class="nav_list clear">
        <a href="#" class="nav_item">牛奶</a>
        <a href="#" class="nav_item">风扇</a>
        <a href="#" class="nav_item">汽车</a>
        <a href="#" class="nav_item">图书</a>
        <a href="#" class="nav_item">零食</a>
        <a href="#" class="nav_item">护肤品</a>
        <a href="#" class="nav_item">衣服</a>
        <a href="#" class="nav_item">电器</a>
    </nav>
   </header>
   <div class="main_list">
   		<a href="#" alt="" class="main_item"><img src="images/list_img1.png" /></a>
        <a href="#" alt="" class="main_item"><img src="images/list_img2.png" /></a>
        <a href="#" alt="" class="main_item" ><img src="images/list_img3.png" /></a>
        <a href="#" alt="" class="main_item"><img src="images/list_img4.png" /></a>
        <a href="#" alt="" class="main_item"><img src="images/list_img5.png" /></a>
        <a href="#" alt="" class="main_item"><img src="images/list_img6.png" /></a>
    </div>
</body>

实现的效果图：

weixin_37460170

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
移动端布局页面实现

目前在的手机的大小有很多，所以要做到页面适应每一个手机页面，不仅麻烦，而且不利于后期维护。解决方法： var pixclPatio = 1 / window.devicePixelRatio; document.write(''); var html = document.getElementsByTagName('html')[0]; var pageWidth = html.g
复制链接

扫一扫

专栏目录