小程序中设置height: 33.33vw * 386 / 232 /2无效果的解决办法

用calc()计算元素高度

最新推荐文章于 2022-03-06 10:43:31 发布

原创最新推荐文章于 2022-03-06 10:43:31 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

博客提到可使用calc()来计算元素的高度，还配有相关图示。calc()是前端开发中用于计算元素尺寸的实用方法。

可用calc()计算得到元素的高度如图：在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Tsai Tsai

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序商城项目实战(第一篇:项目搭建与首页)

没有途径，只有努力

04-06

6963

商城项目第一篇项目搭建项目结构编写整个项目中需要用到的功能request.js全局样式组件(搜索框)首页代码编写效果图项目搭建后端接口:https://www.showdoc.com.cn/128719739414963/2516997897914014 { "pages": [ "pages/index/index", "pages/category/category", "pages/goods_list/goods_list", "pages/goods_d

微信小程序中的vw和vh单位

kerryqpw的博客

07-11

2万+

微信小程序中的vm和vh单位

参与评论您还未登录，请先登录后发表或查看评论

CSS解决高度自适应问题

weixin_30613343的博客

03-20

3056

高度自适应问题，我很抵触用js去解决，因为不好维护，也不够自然，但是纯用CSS，难度不小，比如下面我要说的例子。需求： 1. 这个矩形的高度和浏览器窗口的高度相同，不能出现纵向滚动条 2. 绿色部分高度固定，比如50px 3. 紫色部分填充剩余的高度 HTML结构暂且如下： <div id="main"> <div id="nav">nav&...

height 微信小程序 无效_Uni-APP从微信小程序迁移到支付宝小程序

weixin_42523693的博客

01-09

459

效果成品效果场景微信小程序虽然最早也是不支持个人，但是相比来说，比支付宝等小程序，早太多支持个人，所以手上有许多个人小程序。从支付宝、百度、头条小程序开始，就一直希望允许个人开发者。今天2019/03/19，突然收到支付宝提醒个人小程序申请公测了，便去尝试。整个申请流程非常舒服，几乎没有任何阻力。简述这个小程序最早自然是用微信小程序原生写的，花了2小时不到，后面陆陆续续改了改UI，加了帮助功能，整...

微信小程序的less文件写入计算公式但是在wxss文件还是计算公式没有计出结果的bug

dw将限制条件全部检测通过后才能提交表单

03-06

406

微信小程序的less文件写入计算公式但是在wxss文件还是计算公式没有计出结果的bug 下面的代码是在less文件里，height属性写入公式后在wxss中还是公式，没有达到效果。 less文件：下面是wxss文件：效果：解决方法：将：height: 33.33vw *386 /232/2 ; 改为：height: calc(33.33vw *386 /232/2 ); 效果： ...

【微信小程序】动态API+手动实现页面楼层

DUMG

05-01

1798

动态API+手动实现页面楼层 1. 获取楼层数据接口：https://api-hmugo-web.itheima.net/api/public/v1/home/floordata pages/index/index.js // 引入用来发送请求的方法 import { request } from "../../request/request.js"; Page({ data: { ...

关于移动端html设置font-size: 13.33vw的传说解释~~~~~

chi1130的博客

09-25

9197

前几天看了下网易官网https://3g.163.com/touch/#/，切到移动端视图，发现：它的css写的是13.33vw；再看看css文件，又发现：依然写的都是13.33vw，那这个13.33是怎么来的呢？如果你了解设计稿你就懂了，其实很简单：首先要先说明：移动端的设计稿一般是width：750px，height：auto（这里指的是不确定），100...

微信小程序-懂你找图

lpp3221975785的博客

01-10

2367

1.GitHub链接：https://github.com/laipingping/dnzt.git 2. 接口文档的说明 https://www.showdoc.com.cn/1162316710355752?page_id=5897019224037833 服务器地址： http://118.190.104.39:3000 3. 首页模块的推荐组件 3.1实现精选大图新建推荐组件recommend,并在index引入 index.json { "usingCom..

【微信小程序】黑马优购--02首页

weixin_58214412的博客

12-20

1932

4首页接口文档 4.1效果 4.2首页-搜索框 4.2.1搜索框组件的引入首先在components文件下新建自定义组件Searchlnput 然后在首页index.json中引入 { "usingComponents": { "Searchlnput":"../../components/Searchlnput/Searchlnput" }, "navigationBarTitleText": "优购首页" } 接着在index.wxml中...

黑马优购小程序之首页模块开发(banner 分类导航楼层等)

小洋人最happy的专栏

03-02

5736

文章目录1.1 效果图1.2 搜索框1.2.1 新建组件1.2.2 编写组件1.2.3 引用组件1.2.4 使用组件1.2.5 效果预览1.3 轮播图1.3.1 获取网络数据1.3.2 编写UI 1.1 效果图首页实现效果图如下，并过了模块拆分，拆分为：头部搜索轮播图导航楼层 1.2 搜索框搜索框在项目内好几处都会使用到，因此，将其封装为组件。 1.2.1 新建组件在compo...

小程序项目--电商优购day01

weixin_46379498的博客

07-04

1730

小程序项目–电商优购效果如图搭建目录结构搭建项目页面目录引⼊字体图标 1.打开阿⾥巴巴字体图标⽹站 2.选择的图标 3.添加⾄项⽬ 4.下载到本地 5.将样式⽂件由.css修改为.wxss 6.⼩程序中引⼊首页效果业务逻辑 1.使⽤tabbar实现底部导航功能 2.使⽤⾃定义组件的⽅式实现头部搜索框 3.加载轮播图数据 4.加载导航数据 5.加载楼层数据接口 1.获取⾸⻚轮播图数据 https://api.zbztb.cn/api/public/v1/home/swip

学习小程序一些小问题(1)

ajxaxnaax的博客

10-31

159

.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4){ height: calc( 33.33vw * 386 / 232 / 2); } 使用clac时运算符前后要加上空格

电商实战项目-首页

得意小门生的博客

10-09

402

自定义组件定义组件：声明组件：index/index.json 使用组件：index/index.wxml 轮播图 <!-- 1、swiper标签存在默认的框度和高度 100% * 150px 2、image标签也存在默认的宽度和高度 320px * 240px 3、设计图片和轮播图 1、先看一下原图的宽高 750 * 340 2、让图片的高度自适应宽高等于100% 3、让swiper标签的高度变成和图片的高一样即可 4、图片标签 .

微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）

李益

11-15

4万+

因为小程序是以微信为平台运行的，可以同时运行在android与ios的设备上，所以不可避免的会遇到布局适配问题，特别是在iphone5上，因为屏幕尺寸小的缘故，也是适配问题最多的机型，下面就简单介绍几种适配方法。 rpx适配 rpx是小程序中的尺寸单位，它有以下特征： 小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此 1rpx=（screenWi...

CSS3 使用 calc() 计算高度 vh px

热门推荐

Ranx的博客

09-28

13万+

1、px 像素，我们在网页布局中一般都是用px。 2、百分比百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。 3、Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport

微信小程序开发学习笔记003--微信小程序页面布局

添柴程序猿的专栏

02-15

3464

技术交流QQ群:170933152 今天讲页面布局: h5中,页面布局是由html+css实现的. 但是在小程序中,咱们通过wxml和wxss写的好,在小程序中,针对于普通的html和css增加了哪些新特性好,咱们再看看布局flex: 页面布局 • 新增特性 • 布局flex 今天咱们的目标是做出京东的页面京东app.png ----

解决html中引入less在浏览器中没有效果的方法

🌱「码路小匠」：以代码为凿，刻出技术的形状

04-21

8032

开发工具：vscode 首先在扩展里下载Live Server这个插件然后在vscode中右键点击Open with Live Server 如下面这个例子： index.html中关键代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

夜光带你走进微信小程序开发（三十五）擅长的领域

夜光的博客

03-17

212

夜光序言：正文：以道御术 / 以术识道 ...

3 | 小程序实战之首页设计（tabbar + 头部搜索框+ 轮播图 + 使用promise优化原生的请求 + 分类导航 + 楼层)

NSX-Truth

08-14

2122

前言由于项目很多数据（如图片等）都是从后台调用的，这里给一个API接口文档，但是，我不会讲解怎么在后台写代码，因为这是一个小程序实战，主要学的是怎么去设计一个小程序，至于未来，我会再写一个基于SpringBoot的小程序开发实战的笔记！ 1. 效果 2. tabbar底部导航栏已在上一节（2 | 小程序实战之项目搭建）完成 3. 头部搜索框由于很多页面都需要使用头部搜索框，所以，为了实现动态化，我们需使用自定义组件 3.1 新增组件在components文件夹下新增 SearchInput 组件

外卖点餐小程序开发教程：快速掌握WXML至JS全过程

它还支持引入外部样式文件，为小程序界面提供更加丰富的视觉效果。 ```css /* 示例：WXSS样式 */ .menu-item { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #eee; } .item-...