关闭

移动端布局页面实现

68人阅读 评论(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>

实现的效果图:


0
0
查看评论

移动端布局方案 讲解与实例

https://github.com/riskers/blog/issues/17 https://github.com/riskers/blog/issues/18
  • qq_29253285
  • qq_29253285
  • 2016-06-26 21:20
  • 162

浅谈前端移动端页面开发(布局篇)

前言的一些碎碎念:最近一直在写移动端的页面,不过一直是用的别人造好的轮子,很多时候并没有想那是为什么,那是怎么样要那么写,就跟着别人的文档去了。本以为自己对移动端的那一丢丢理解,结果很多东西都特么有问题,所以,今天停下了手中的一些东西,来谈下移动端的布局方案吧 内容有些长,这也是我第一次写博客...
  • u010852544
  • u010852544
  • 2016-12-09 14:17
  • 2317

移动端布局 Css3 弹性盒子模型封装 display:box;

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作。在该布局模型中,容器会根据布局的需要,调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发...
  • lnend
  • lnend
  • 2015-10-28 21:31
  • 228

PC端移动端兼容响应式布局页面的制作

之前已经制作了PC端固定布局和移动端流体布局的页面,这次的任务就是将一个页面制作成PC端移动端兼容响应式布局页面,是页面能在不同屏幕大小下呈现处不同最佳显示状态。 主要的过程就是对: 1.将width改为max-width,来适应屏幕的变动来改变自身宽度等。其他亦然。 2. /*媒体查...
  • JinYF1992
  • JinYF1992
  • 2016-06-07 14:58
  • 9960

移动端rem布局初步练习

渐渐明白,要做就要做高级,现在社会已经不需要实习工,不需要初级员工。如果你培训几个月能够找到相关工作,如果刚毕业什么都不懂能够找到工作,请好好珍惜。因为很多小白给人免费实习别人都嫌碍事,本人亲历。 你不努力,就别想着高工资了,现在没有那个行业竞争不激烈,要做就要做好,否则就不要怪社会不公! 公司需要...
  • wujimiao
  • wujimiao
  • 2017-03-17 23:56
  • 585

Web移动端Css Fixed方式的布局方案

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。 iOS下的 Fixed + Input BUG现象 让我...
  • muguli2008
  • muguli2008
  • 2017-04-10 22:47
  • 1004

【移动端】页面自适应布局—基于rem布局

今天来总结一下移动端学习的学习成果。   移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?   在布局的时候需要考虑,让不同大小的手机屏幕随着分辨率的变化,页面元素的尺寸和间距都相应变化,即可以实现等比例的布局。另...
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016-05-23 15:26
  • 3230

Web移动端Fixed布局的解决方案(原文出处:http://efe.baidu.com/blog/mobile-fixed-layout)

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed ...
  • linzhijing_csdn
  • linzhijing_csdn
  • 2016-04-18 10:29
  • 1963

一种移动端布局方式随内容往下走的底部

经典的随内容的增多,底部不断向下走,保持一直在下面<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&...
  • u010030590
  • u010030590
  • 2017-03-18 14:40
  • 638

移动端 h5开发相关内容总结——CSS篇

1.移动端开发视窗口的添加h5端开发下面这段话是必须配置的<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">其它相关配置内容如...
  • yisuowushinian
  • yisuowushinian
  • 2016-01-06 15:59
  • 23878
    个人资料
    • 访问:1557次
    • 积分:175
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档