移动端web适配方案详解

2018-2-13 23:47| 发布者: admin| 查看: 340| 评论: 0|来自: 蚂蚁部落

移动端适配方案会涉及到几个重要的概念,具体参阅以下文章:

(1).设备像素、独立像素和css像素一章节。

(2).devicePixelRatio设备像素比一章节。

(3).viewport视口详解一章节。

(4).meta viewport详解一章节。

PC端虽然存在着浏览器兼容问题,但是没有适配问题,完全按照切图制作页面,比如顶部导航栏长度是600px,底部的下载按钮长度是60px。而移动端则要复杂的多,因为移动设备规格繁多,尤其安卓机更是五花八门,比如公司设计师给出一份宽度是750px设计图,如何实现在各种规格移动端设备上实现良好的展示就是本文要解决的问题。

一.适配概念:

适配概念在上面其实已经介绍了,总结如下:

在不同规格的移动设备上,页面能够针对性的实现合理或者尽可能统一的展示效果。

二.常用适配方案:

(1).固定高度,宽度自适应。

(2).rem做宽度,viewport缩放

特别说明:篇幅问题,最后一个方案单独拿出一篇文章介绍。

三.固定高度,宽度自适应:

此方案适合比较简单的布局,看拉钩网页面结构:

a:3:{s:3:\"pic\";s:43:\"portal/201802/13/162403zkk8drhdkdmdi8ob.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面页面非常的简单,基本特点如下:

(1).顶部和底部的bar高度不变,宽度实现横向全屏自适应。

(2).职位列表部分,公司logo和职位描述位于坐标,薪酬位于右边,中间部分随着容器元素尺寸变化自适应。

此方法使用了完美视口,代码如下:

[HTML] 纯文本查看 复制代码
<meta name="viewport" content="width=device-width,initial-scale=1">

下面分享两端使用百分比和flex实现的代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>固定高度,宽度自适应,100%比做适配</title>
<style type="text/css">
*{
  padding:0;
  margin:0;
}
body{
  font-size:16px;
  overflow:hidden;
  box-sizing:border-box; 
}
/*left start*/
.left{
  width:40px;/*两边固定宽度,中间自适应*/
  height:40px;/*高度可以不加,由内容填充*/
  position:absolute;
  left:0;
  top:0;
  background:red;
  text-align:center;
  line-height:40px;
}
/*left end*/
/*center start*/
.center{
  width:100%; /*宽度不固定*/
  background:orange;
  height:40px; 
  margin-left:40px;
  margin-right:40px;
}
.center input{
  width:100%;
  height:40px;
  outline:none;
}
/*center end*/
/*right start*/
.right{
  width:40px;/*两边固定宽度,中间自适应*/
  height:40px;/*高度可以不可,由内容填充*/
  text-align:center;
  line-height:40px;
  position:absolute;
  right:0;
  top:0;
  background:green;
}
/*right end*/
/*banner adv start*/
.banner{
  width:100%;
  height:200px;
  background:pink;
  text-align:center;
  line-height:200px;
}
/*banner adv end*/
/*list start*/
.list{
  overflow:hidden;
}   
.list div{
  width:20%;
  height:90px;
  float:left;
  text-align:center;
  line-height:90px;
}
.list div:nth-of-type(1){
  background:orange;
}
.list div:nth-of-type(2){
  background:#80B3FF;
}
.list div:nth-of-type(3){
  background:#1BA260;
}
.list div:nth-of-type(4){
  background:#F2A196;
}
.list div:nth-of-type(5){
  background:#FFCE42;
}
.listTwo{
  margin:15px 0 0 0;
}
/*list end*/
/*con start*/
.con{
  width:100%;
  height:200px;
  overflow:hidden;     /*子元素使用来浮动,父元素记得清除浮动*/
  text-align:center;
  line-height:200px;
}
.left-80{
  width:80%;
  height:100%;  /*想要一个元素在页面中显示必须得给元素高度,继承父元素*/
  float:left;
  background:#B0E24A;
}
.right-20{
  width:20%;
  height:100%; /*高度100%,继承父元素的高度*/
  float:right;
  background:#6C6863;
}
/*con end*/
</style>
</head>
<body>
<!-- header start -->
<header>
  <div class="left">左边</div>
  <div class="center">
    <form>
      <input type="search" name="">
    </form>
  </div>
  <div class="right">右边</div>
</header>
<!-- header end -->
<!-- banner adv start -->
<div class="banner">adv</div>
<!-- banner adv end -->
<!-- 列表list start -->
<div class="list">
  <div>1</div> 
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>  
</div>
<div class="list listTwo">
  <div>6</div> 
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>  
</div>
<!-- 列表list end -->
<!-- con内容开始-->
<div class="con">
  <div class="left-80">左边80%</div>
  <div class="right-20">右边20%</div>
</div>
<!-- con内容结束-->
</body>
</html>

上面代码采用百分比方式实现的高度固定,宽度自适应适配效果。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>固定高度,宽度自适应,flex做适配</title>
<style type="text/css">
*{
  padding:0;
  margin:0;
}
body{
  font-family:"微软雅黑";
  font-size:16px;
}
.parent{
  display:flex; 
}
.left,.right{
  width:40px;
  height:40px;
  text-align:center;
  line-height:40px;
}
.left{
  background:#abcdef;
}
.right{
  background:#DD4F43;
}
.center{
  flex:1;
}
.center input{
  width:100%;
  height:40px;
  outline:none;
}
.banner-adv{
  width:100%;
  height:200px;
  background:#0D6CB0;
}
.list{
  width:100%;
  height:90px;
  display:flex;
}
.list div{
  flex:1;
  text-align:center;
  line-height:90px;
}
.list div:nth-of-type(1){
  background:#DE5246;
}
.list div:nth-of-type(2){
  background:#19A25F;
}
.list div:nth-of-type(3){
  background:#FF8080;
}
.list div:nth-of-type(4){
  background:#F4CD0B;
}
.list div:nth-of-type(5){
  background:#9EDA45;
}
.list-Two{
  margin:15px 0 0 0;
}
.list-Two div:nth-of-type(1){
  background:#B847FF;
}
.list-Two div:nth-of-type(2){
  background:#79B900;
}
.list-Two div:nth-of-type(3){
  background:#FF2424;
}
.list-Two div:nth-of-type(4){
  background:#D2E4F0;
}
.list-Two div:nth-of-type(5){
  background:#4CDF2B;
}
.con{
  height:200px;
  display:flex;
}
.con div:nth-of-type(1){
  flex:8;
  background:#80B3FF;
}
.con div:nth-of-type(2){
  flex:2;
  background:#CD8B37;
}
</style>
</head>
<body>
<header class="parent">
  <div class="left">左边</div>
  <div class="center">
    <form>
      <input type="search" name="">
    </form>
  </div>
  <div class="right">右边</div>
</header>
<div class="banner-adv"></div>
<section class="list">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</section>
<section class="list list-Two">
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>9</div>
</section>
<div class="con">
  <div></div>
  <div></div>
</div>
</body>
</html>

上面代码采用flex实现的高度固定,宽度自适应适配效果。

关于flex更多内容参阅display:flex弹性布局一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部