移动端 - 实战篇 - 珠宝街项目

Sokeer
194 阅读4分钟

一、移动端 基础知识

1.1 设计图的规范

image.png

1.2 IOS控件规范

image.png

1.3 IOS字体规范

image.png

1.4 物理像素 & 逻辑像素

image.png

image.png

1.5 viewport 视口

image.png

image.png

1.6 meta标签

image.png

image.png

image.png

image.png

image.png

<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no,email=no,adress=no">
<meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=yes" />
<meta name="keywords" content="珠宝街,珠宝商城,珠宝街手机版,黄金、钻石、彩宝、铂金、银饰、翡翠、玉石、珍珠、水晶、手串、手链、手镯、戒指、佛珠、工艺品、企业礼品定制">
<meta name="description" content="珠宝街、珠宝街手机版-中国最大的珠宝商城网站,在线销售黄金、钻石、彩宝、铂金、银饰、翡翠、玉石、珍珠、水晶、手串、手镯、手链、戒指、项链、手表、眼镜、转运珠、工艺品、字画收藏、企业礼品定制等海量珠宝品牌，珠宝知名大牌:周大福、老凤祥、周六福、卡地亚、百泰、菜百、周大生、中国黄金均入驻珠宝街平台，更汇聚全国知名珠宝批发基地，买珠宝,就上珠宝街! ">

二、开发流程

2.1 重置样式 & 公共样式

base.css中的内容：

  • 清除 所有元素的内外边距
  • 使用 border-box盒子模型
    box-sizing: border-box;
  • 禁止 轻按文字高亮显示
    -webkit-tap-highlight-color: transparent;
  • 禁止 用户选中网页内容
    -webkit-user-select: none;
  • 规范写法 or 简单写法
  • 禁止 网页自动根据设备调整字体大小
    -webkit-text-size-adjust: none;
  • 清除 常见标签的 默认样式
    清除常见标签身上自带的那些无用的默认样式，如列表项前面的小圆点等。
  • 清除浮动
  • 根据设计稿，设置 一些标签的 公共样式。
    如字体大小、字体、超链接样式等。

/* 简单写法 */
/* *, ::before, ::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
} */

/* ------公共基础样式------ */
/* 规范写法 */
body,header,footer,section,div,span,p,img,a,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,em,i,b,u,menu,nav,
fieldset,legend,article,aside,details,figcaption,figure,hgroup,pre,form,input,blockquote,th,
th,td,tr,table,textarea{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;  /* 取消高亮显示 */
    -webkit-user-select: none; /* 禁止用户选中 */
    -webkit-text-size-adjust: none; /* 禁止自动调整字体大小 */
}

h1,h2,h3,h4,h5,h6,em,i,b,u{ /* 重置 常见标签的 默认样式 */
    font-size: 100%; 
    font-style: normal; 
    font-weight: normal;
}

ul,li,ol{ 
    list-style: none;
}

img,fieldset{
    display: block;
    border: 0 none; 
    vertical-align:middle;
}

input, textarea{
    resize: none; /*不允许调整尺寸*/
}

:focus{ 
    outline: none; 
}

input[type="submit"],input[type="reset"],
input[type="button"],input[type="password"],
input[type="search"],button{
    -webkit-appearance:none;  /*清除表单中对象的外观样式*/
}
.clearfix:after{  /*清除浮动*/
    display: block;
    width: 0;
    height: 0;
    line-height: 0px;
    visibility: hidden;
    content: '';
    clear: both;
}

/*超链接*/
a,a:link,a:visited{ 
    text-decoration: none; 
    color: #333;
}
a:hover{ 
    color: #666; 
    text-decoration: none;
}

body{
    font-family: "Microsoft YaHei","\u534E\u6587\u7EC6\u9ED1",Verdana,Arial,Helvetica,sans-serif; 
    font-size: 28px;
}

2.2 移动端web自适应解决方案： adaptive.js

移动端web自适应解决方案: adaptive.js
www.cnblogs.com/mufc-go/p/4…

javascript H5自适应框架
github.com/qietu/adapt…

javascript H5自适应方案
github.com/finance-sh/…

◎ 示例：adative.js的基本使用。

image.png

2.3 移动端 常见布局&样式

  • 绝对定位元素 水平居中
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     margin: 0 auto;
  • 清除 input标签/button标签 默认的 边框线 和 背景色
    border: 0 none;
    background: transparent;
  • 设置input标签 placeholder文字 颜色 伪类选择符 ::-webkit-input-placeholder
input::-webkit-input-placeholder{
    color: #fff;
}
  • 设置input标签 输入文字 的左边距、文字颜色
input{
    padding-left: 0.18rem; 
    color: #fff;
}
  • 解决 移动端 页面向上滚动 不流畅问题
 -webkit-overflow-scrolling: touch;  /*增加弹性滚动，解决滚动不流畅的问题*/
  overflow-y: scroll;
  • 父容器 宽度占满，高度自动，由内容撑开。
    width: 100%;
    height: auto;
  • 单行文本 溢出隐藏 显示省略号
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  • 2行文本 溢出隐藏 显示省略号

父容器 height: 等于行高的2倍; overflow: hidden;

子元素

display: -webkit-box; 
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 text-overflow: ellipsis;

  • 检查页面 在不同大小的屏幕上 布局是否都是合适的，否则就进行调整。

  • :nth-child(2n+1) 匹配奇数

  • 解决margin塌陷 出现原因：父元素没有设置margin-top,而子元素设置了margin-top,就会使得父元素高度 = 父父元素高度 - 子margin-top 解决：父元素设置 overflow: hidden;

  • 移动端web端 常用的一些 meta标签

  • ico图标

 <link rel="shortcut icon" href="favicon.ico"/>
  • 满屏页面的制作方法 让 移动端页面 占满 屏幕的 宽度、高度。
.container{  
    position: absolute; 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: scroll;
    margin: 0 auto;
    width: 750px;
}

  • background: transparent; 父容器 设置了圆角 子元素 设置background: transparent; 可以避免遮盖掉父容器的圆角效果

  • overflow-y: auto | scroll; 垂直方向上 内容溢出时 显示滚动条

  • 盒子设置width，而不设置height，则高度由内容撑开。内容有多高，盒子就有多高。

  • 样式排版 不放过任何一个标签

  • 行高有继承性

  • 满屏页面

默认情况下，如果不给html、body设置高度，则它们的高度由内容来撑开，内容有多高，则html、body有多高。 如果想要html、body的高度占满屏幕高度，应该怎么办呢？

满屏页面的制作方法

方法1：

    html,body{ width: 100%; height: 100%; }

方法2：

    body{ position: absolute; height: 100%; }

方法3： 设置高度

.container{ position: absolute;  
    left: 0;
    right: 0;
    height: 100%;
}

方法4： 不设置高度，设置 内容 y轴溢出 显示滚动条。（推荐）

.container{  
    position: absolute; 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: scroll;
    margin: 0 auto;
    width: 750px;
}

官方文档

CSS参考手册 css.doyoe.com/

阿里巴巴矢量图标库 www.iconfont.cn/

IcoMoon icomoon.io/

Font Awesome中文网 www.fontawesome.com.cn/

学习资料

视频教程：
电商平台设计制作-商城移动端项目实战-【黑马先锋】

学习资料&练习代码：
H:\学习课程\ediary日记\学习课程\商城移动端项目实战_腾讯课堂

码云仓库：
gitee.com/yeagelin/zh…

avatar
文章
阅读
粉丝