当前位置: 首页 > news >正文

微信小程序媒体查询

在微信小程序中,@media媒体查询不支持screen关键字,因为小程序页面是再webview中渲染的,而不是在浏览器中渲染的。

在设置样式时,可以使用 wxss 文件中的 @media 规则来根据屏幕宽度或高度设置不同的样式。

  • device-width:设备屏幕的宽度,单位px
  • device-height:设备屏幕的高度,单位px
  • width:小程序窗口的宽度,单位rpx
  • heigth:小程序窗口的高度,单位rpx
  • aspect-ratio:设备屏幕的宽高比
  • orientation:设备屏幕方向,可以是portrait(竖屏)或landscape(横屏)
.bg {background:#ffffff}/* 当屏幕宽度小于 750rpx 时应用以下样式 */@media (max-width: 750rpx) {.bg {background:#000}
}/* 设备宽度 单位px */
@media (max-device-width: 350px) {.bg {background:#000}
}

http://www.lryc.cn/news/333717.html

相关文章:

  • 前端(动态雪景背景+动态蝴蝶)
  • 软考-系统集成项目管理中级-新一代信息技术
  • 【卷积神经网络进展】
  • yarn的安装和使用
  • Golang | Leetcode Golang题解之第10题正则表达式匹配
  • 【Leetcode】top 100 图论
  • 【沈阳航空航天大学】 <C++ 类与对象计分作业>
  • Vue3 自定义指令Custom Directives
  • 蓝桥杯 【日期统计】【01串的熵】
  • CSP201409T5拼图
  • mongoDB 优化(2)索引
  • 【2024系统架构设计】案例分析- 5 Web应用
  • 布隆过滤器详解及java实现
  • CloudCompare 点云工具
  • Linux 著名的sudo、su是什么?怎么用?
  • C语言分支语句
  • android 资源文件混淆
  • 注册接口和前置SQL及数据生成及封装
  • 鸿蒙实战开发-通过输入法框架实现自绘编辑框
  • 深度学习中的注意力模块的添加
  • Docker 部署开源远程桌面工具 RustDesk
  • intellij idea 使用git ,快速合并冲突
  • AcWing26. 二进制中1的个数。三种解法Java
  • 【ADB】常见命令汇总(持续更新)
  • 【递归与递推】数的计算|数的划分|耐摔指数
  • 企业案例:金蝶云星空集成钉钉,帆软BI
  • 简单设计模式讲解
  • 基于springboot的社区医疗服务系统
  • 影院座位选择简易实现(uniapp)
  • 调用飞书获取用户Id接口成功,但是没有返回相应数据