XuHang

岁月静好，妙香暖心。

杭电助手宋城任务总结

• 标签: project summary

背景

本次任务主要为活动报名抽奖页面的实现，由于是第一次写移动端的web页面，所以在对于手机屏幕的适配(特别是安卓设备)的适配上花费了较多精力。

pic

遇到问题

  1. 1.字体随着屏幕大小而改变
  2. 2.对于不同屏幕大小进行元素定位
  3. 3.禁止用户对屏幕进行缩放
  4. 4.个性字体的引入
  5. 5.背景图的自适应

解决方案

1.

对于第一个文问题，主要采用了媒体查询的方法，也就是自动查询设备的宽度，然后动态的改变字体的像素大小。代码如下: 

/*iphone4*/
    @media screen and (max-width:360px){body{font-size:19px}}
    /*iphone5、6*/
    @media screen and (min-width:360px){body{font-size:22px}}
    /*iphone6p*/
    @media screen and (min-width:400px){body{font-size:25px}}
    @media screen and (min-width:480px){body{font-size:29px}}
    @media screen and (min-width:560px){body{font-size:30px}}
    @media screen and (min-width:600px){body{font-size:31px}}
    @media screen and (min-width:640px){body{font-size:33px}}
    @media screen and (min-width:750px){body{font-size:35px}}
    @media screen and (min-width:850px){body{font-size:35px}}
2.

对于这个问题，主要是使用了百分比定位的方法，将内容区域div的positon设置为absolute后使用百分比来设置margin等属性，代码如下: 

#content {
        padding-left: 20px;
        background: url("img/bg2.JPG");
        position: absolute;
        border-radius:4px;
        box-shadow:1px 1px 2px #000;
        margin-top: 40%;
        margin-left: 8%;
        padding-top: 10%;
        padding-bottom: 20%;
        width: 80%;
    }

这得好处就是内容位置会随着屏幕大小的改变而改变，是的不同屏幕上效果类似。

3.

这个问题有通用的解决方法，只需要在开头加上如下代码：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

简单解释一下含义:

  1. viewport:可以理解为你看到的窗口的一些设置
  2. width=device-width：也就是说viewport的宽度设置为设备宽度（当然也可以设置为一个固定值）
  3. initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0：这三句规定了初始缩放比例，最小和最大缩放比例

  4. user-scalable:这句用来禁止或者允许用户进行缩放

    总的来说，这句的功能就是窗口宽为手机移动设备默认宽度，初始缩放比例为1.0，最大缩放比例为原始像素大小，也就是禁止缩放。

4.

想要引入个性字体，首先要下载字体文件，然后使用如下代码: 

@font-face{
        font-family:'font2';
        src:url("font/font2.TTF");
        font-style:normal;
        font-weight:normal;
    }

这样即可引入你所需的个性字体（如果字体文件是中文的话，建议改成英文，避免不必要的麻烦），随后即可正常使用，就想这样:
html,body{
width: 100%;
color: black;
font-family:”font2”;
}

5.

我们需要插入一张背景图，然后能够使得其大小随着屏幕变化而变化，也就是自适应，主要要采用了以下代码: 

#web_bg{
       position:absolute;
       width:100%;
       height:100%;
       z-index:-2;
   }
  #web_bg img{
       position:fixed;
       height:100% ;
       width:100%;
   }

   <div id="web_bg">
       <img src="img/bg1.JPG" />
   </div>

其原理主要还是让图片fixed然后width:100；height:100%;
当然，使用css3也可以实现。

结语

本次任务页面不算复杂，但是在元素定位以及屏幕适配上的确费了不少功夫，果然是“台上一分钟，台下十年功”。

pic