一、创建pc.js文件 1 2 3 4 5 6 7 8 9 10 11 12 // #ifdef H5 (function() { varu = navigator.userAgent, w = window.innerWidth; if(!u.match(/AppleWebKit.*Mobile.*/) || u.indexOf("iPad") > -1) { window.innerWidth = 750 * (w / 1920); window.onload =function() { wind...
窗体级适配:leftwindow、rightwindow、topwindow等分栏 组件级适配:match-media组件 rpx的宽屏响应 窗体级适配:leftwindow分栏 新建rightWindow.vue页面(这个页面不需要从写,只需要复用原来的组件detail.vue) <template> // 原来的组件detail.vue <detail ref="detailPage" :text="detail" ></detail> </template> ...
而pc显示器多为宽屏设计,即设备宽度大于设备高度,在pc上的桌面应用,很多会采用左右分栏的UI设计。 uni-app以目前手机屏幕为主窗体(window),在左/右/上三个方向,新扩展leftWindow、rightWindow、topWindow三个窗体,这三个窗体可设定在屏幕宽度大于某一阀值时自动出现(展现分栏的宽屏设计),屏幕宽度小于某一阀值后自动...
uni-app 宽屏适配方案包括: 页面窗体级适配方案:leftWindow、rightWindow、topWindow 组件级适配方案:match-media组件 内容缩放拉伸的处理及rpx的控制策略 通过各种强大、灵活的屏幕适配工具,开发者可以极快的完成PC版和手机版的适配。 以DCloud提供的新闻模板示例为例,把for手机的应用适配为PC版,工作量不到半天 ...
二、App.vue添加适配样式 /* #ifdef H5 */body{max-width:828rpx;//最大宽度自己可以调整margin:auto!important;}/* #endif */ 三、main.js中引入pc.js(要在导入app示例之前引入) importVuefrom"vue";//导入PC适配JS(H5)// #ifdef H5import"./common/services/pc";// #endifimportAppfrom"./App";...
类似于网页开发中使用媒体查询来适配大屏小屏,match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则,满足查询条件时,这个组件才会被展示。 例如在match-media组件中放置一个侧边栏,媒体查询规则设置为宽屏才显示,就可以实现在PC宽屏显示该侧边栏,而在手机窄屏中不显示侧边栏的效果...
uni-app宽屏适配方案包括： 页面窗体级适配方案：leftWindow、rightWindow、topWindow 组件级适配方案：match-media组件 内容缩放拉伸的处理及rpx的控制策略通过各种强大、灵活的屏幕适配工具，开发者可以极快的完成PC版和手机版的适配。以DCloud提供的新闻模板示例为例，把for手机的应用适配为PC版，工作量不到半天。并且...
"globalStyle":{"h5":{//#ifdef H5"maxWidth":1160,// #endif"navigationBarTextStyle":"black","navigationBarBackgroundColor":"#F1F1F1"},//设置宽屏最大宽度"rpxCalcMaxDeviceWidth":960,// rpx 计算所支持的最大设备宽度,单位 px,默认值为 960"rpxCalcBaseDeviceWidth":375// 设备实际宽度超出 rpx...
uni-app的后续计划是在H5端将提供服务端渲染机制（SSR）和PC宽屏界面适配优化，在追求性能极致和大一统的道路上继续前进！相关代码全部托管在 GitHub，欢迎大家 Star 或提交 PR。作者：uni-app团队，即DCloud团队，专注服务中国的前端开发者，已发布产品包括：前端IDE（HBuilder/HBuilderX）、前端ui库（mui）、跨平台...