【小程序商城实战-Taro3开发-课程4】CSS样式

最新推荐文章于 2024-04-15 10:08:11 发布

jameshi

最新推荐文章于 2024-04-15 10:08:11 发布

阅读量514

点赞数

分类专栏： taro 文章标签：小程序

本文链接：https://blog.csdn.net/knight86/article/details/115697128

版权

taro 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

一、css尺寸

1、屏幕尺寸单位背景知识

使用范围	设备像素【物理像素】	设备独立像素	微信小程序	H5
单位	px	dip或者dp	rpx	rem
单位全称	pixel	Device Independent Pixels（设备独立像素）	responsive pixel（可以根据屏幕宽度进行自适应）	font size of the root element （根元素的字体大小）
单位说明	以iphone6手机为例，其屏幕的物理分辨率为：750px*1334px。	dp = px / device pixel ratio，其中 device pixel ratio = ppi / 160 以iphone6手机为例， dp=750 /（326/160） ≈750 / 2 =375px	微信小程序规定屏幕宽为750rpx。以 iPhone6 手机为例，其独立像素为375px，物理像素为750px，则 750rpx = 375px 独立像素 = 750px物理像素即 1rpx = 0.5px 独立像素= 1px物理像素	相对于根元素上font-size的计算值。在根元素的font-size属性中指定时，rem单位是指属性的初始值。这意味着1rem等于html元素的字体大小（对于大多数浏览器而言，其默认值为16px）。

延伸知识

（1）像素（英文“pixel”），其中pix是英语单词“picture图像”的复数形式简写，el是英语单词“element元素”的常前两个字母，所以“像素”是“图像元素”的简化名称。

（2）ppi（Pixels Per Inch）是指以1英寸为对角线长度的正方形区域包含多少个像素，也叫像素密度。

（3）同样尺寸的屏幕，有的PPI高，有的PPI低（有的单位面积包含的像素多，有的单位面积内包含的像素少），这样说明了一个问题：像素是没有大小的，它只是一个抽象的概念。

（4）是否还想了解viewport，请阅读 A tale of two viewports

2、设计和开发所使用的尺寸

（1）设计尺寸：宽度：375px 高度：667px

（2）taro前端开发配置尺寸

参考知乎一篇文章：iphone设计尺寸

3、Taro对尺寸的处理

在 Taro 中书写尺寸按照 1:1 的关系来进行书写，即从设计稿上量的长度 100px，那么尺寸书写就是 100px，当转成微信小程序的时候，尺寸将默认转换为 100rpx，当转成 H5 时将默认转换为以 rem 为单位的值。【参考 Taro 设计稿及尺寸单位】

二、布局

（1）需求：实现如下图所示的“商品列表”布局

（2）css的命名规范：小写字母；字母之间以短横杠连接。

（3）具体实现

# 商品列表所在容器布局，统一边距
.goods-container{
    padding-left: 15px;
    padding-right: 15px;
    margin-left: -5px;
    margin-right: -5px;
}

# 单个商品所在容器布局，通过调整width比例，确定每行展示几个商品
.goods-wrapper {
  float: left;
  width: 50%;
}

# 单个商品布局
.goods-item {
  margin: 5px;
  position: relative;
  display: block;
  box-sizing: border-box;
  min-height: 50px;
  overflow: hidden;
  color: #333;
  background-color: #fff;
}

# 底部商品信息布局
.goods-info {
  position: relative;
  padding: 0 12px 4px;
}

# 商品标题名称样式
.goods-item-info-title {
  height: 34px;
  max-height: 34px;
  font-size: 13px;
  line-height: 17px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

# 商品价格样式
.goods-item-info-price {
  position: relative;
  width: 100%;
}
.goods-item-info-price-wraper {
  float: left;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
  margin-right: 8px;
}
.goods-item-info-price .sale-price {
  color: #f44;
  font-size: 18px;
  line-height: 18px;
}
.goods-item-info-price .origin-price {
  color: #c8c9cc;
  height: 20px;
  font-size: 12px;
  line-height: 24px;
  text-decoration: line-through;
}