uniapp 兼容pc与手机的样式方法

  • 开发
  • 38

在h5的开发中，做视窗的样式兼容和适配，大家肯定都知道移动端使用自适应单位rpx,pc端可以使用媒体查询的方法来适配，但是在uniapp 项目开发中，有时在移动端展示的样式会被在桌面端打开，渲染在浏览器，这时候你会发现，因为用的是移动端适配的rpx 导致在pc端查看样式显示非常小，这时候，就需要做相应的兼容了，其实uniapp 也是有相应的方法来做识适配的：

当页面最小宽度 375px， 页面宽度最大 800px 时显示 
    <match-media :min-height="400" :orientation="landscape">
        <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
</match-media>

在uniapp中，match-media可以很好的来判断兼容和适配

阅读全部

相关推荐

  1. uniapp 兼容pc与手机的样式方法

    2024-03-19 00:08:03       39 阅读

  2. uniapp 兼容pc与手机的样式方法

    2024-03-19 00:08:03       45 阅读

  5. 【Taro】React+Taro项目实现页面样式兼容手机端和Pad端

    2024-03-19 00:08:03       53 阅读

  6. uniapp实现手机横屏（方法二）

    2024-03-19 00:08:03       50 阅读

  7. 解决uniApp单独设置小程序的样式不起作用方法之一

    2024-03-19 00:08:03       29 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-19 00:08:03       94 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-19 00:08:03       100 阅读

  9. 在Django里面运行非项目文件

    2024-03-19 00:08:03       82 阅读

  19. Python语言-面向对象

    2024-03-19 00:08:03       91 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-03-19 00:08:03       85 阅读

热门阅读

  1. Amazon Elastic MapReduce介绍

    2024-03-19 00:08:03       36 阅读

  2. 【大数据】二、HDFS 入门演示

    2024-03-19 00:08:03       32 阅读

  4. NTP网络时间服务器的妙用？让网络更精准

    2024-03-19 00:08:03       39 阅读

  6. C语言自定义数据类型：用typedef声明新类型名

    2024-03-19 00:08:03       38 阅读

  7. 算法简单小技巧

    2024-03-19 00:08:03       45 阅读

  8. echarts图表自适应

    2024-03-19 00:08:03       37 阅读

  17. 阅读基础知识2

    2024-03-19 00:08:03       37 阅读

  19. 【C语言】格式化输入/输出

    2024-03-19 00:08:03       44 阅读

  21. ThreadLocal-内存泄露问题

    2024-03-19 00:08:03       41 阅读

  22. 从零开始学HCIA之SDN04

    2024-03-19 00:08:03       43 阅读

  25. Docker的常用命令

    2024-03-19 00:08:03       38 阅读