移动端APP首页案例

案例目的

我主要巩固移动端开发知识，利用所学写出页面的效果，是一个练手的小案例。巩固html css等知识，在开发中多点思考，让效率更加高效。

开发准备

• 开发工具：WebStorm
• 技术栈：
  • 页面骨架：html，html5
  • 样式表：css, 使用sass预处理器
  • 测试：浏览器端模拟真机测试，xampp真机模拟

sass中文注释报错

• Error: Invalid GBK character "\xE5"

  

开发思考

• 设置视口

  设置宽度为设备宽度，初始缩放值为1.0即不缩放

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 单位选择

  选择vw + rem适配移动端

  笔记

• 设置字体图标

  • 切图没什么好说，ps所见即所得 ctrl + shift + alt + s (切片保存快捷键)
  • 设置字体图标，拿到psd设计图之后，将矢量图层选中，然后取消自动选择，ctrl+T 看看会不会失真，如果为矢量就保存为svg 格式 ，ctrl + shift + alt + w (svg保存快捷键)
  • 云上存至 www.iconfont.cn/ 图标库的项目中
  • 下载字体图标到本地，iconfont.css放置css目录，注意修改字体文件的路径，其他字体文件放进font文件，分类储存好
  • html中引入字体图标样式，然后将font-side:inherit ,目的是让字体大小随着屏幕改变

• sass 公用组件抽离(简单模块化)

  • 创建_global.scss 作为公共样式的表

    • 例如清除默认样式

      • 其中浏览器特有 -webkit-text-size-adjust: none; 禁止文字缩放
      • 按钮文本框点击时候出现的高亮:-webkit-tap-highlight-color: rgba(0,0,0,0);
      • ios下的按钮圆角清除：-webkit-appearance: none; border-radius: 0px;
      • 基础html 标签的基础样式

    • 清浮动

      • @mixin clear{
          &:after{
            content: '';
            display: block;
            clear: both;
          }
        }
        //在需要引用的地方，@include clear 一下就可以了
        

    • 提取文字类

      @mixin font($size,$height,$color){
        font: $size#{'/'}$height '微软雅黑' ;
        color: $color;
      }
      //使用
      @include font(rem(30),rem(65),#fff5fd);
      

    • 页面公用样式块，例如导航条等

    • 计算rem

      • //rem 基础值: 100px = 1rem 当前设计图宽度750px,根据具体设计图设置
        //则7.5rem = 100vw = 1 可视区宽度
        //则font-size = 100vw / 7.5rem = 13.3333333 ..vw
        
        html{
          font-size: calc(100vw/7.5);
        }
        @function rem ($num){
          @return ($num/100) * 1rem;
        }
        

    • ...其他

  • 其他页面的样式表中，@import "global";

• 文字在元素区域内上下居中

  • line-height 让文字相对上下居中，但是不是绝对的，所以我们可以利用参考系方式让他居中

    .title{
      padding: 0 rem(60);
      height: rem(154);
      padding-top: rem(20);
    
      font-size: 0; //行内块元素的特性：换行有空格 ,所以父级的 font-size: 0
      text-align: center; //左右居中
    
      &:before{ //建立空白参考系
        content: "";
        width: 0;
        height: 100%; //父级的高度 100%
        display: inline-block;
        vertical-align: middle; //建立中间参考系
      }
      span{ //真正要显示的元素 
        display: inline-block;
        vertical-align: middle; //根据空白参考系进行绝对居中对齐
        font-size: rem(32);
        line-height: rem(48);
        color: #fff;
      }
    }
    

• 雪碧图

  blog.csdn.net/allenyhy/ar…

  当设计师没有将图标们转换为svg，使用不了字体图标的时候，我们可以考虑使用雪碧图，来减少图片的请求。它核心思想是：将很多很多的小图标放在一张图片上，使用backgrount-position来移动不同的小图标。显示不同的图片

• 登录页面布局思考(拓展文字在元素区域内上下居中)

  如果后续做登录页面布局时候，我们希望登录框一直都在页面的中间，所以我思考可以使用参考系方法上下居中方式让他在中间。

  • body设置参考系

     body:before{ //建立空白参考系
         content: "";
         width: 0;
         height: 100%; //父级的高度 100%
         display: inline-block;
         vertical-align: middle; //建立中间参考系
       }
    

  • 让登录的页面设置为

  display: inline-block;
  vertical-align: middle; 
  

  效果图

  

github代码