百分比适配举例

参考:http://blog.youkuaiyun.com/lmj623565791/article/details/46767825
传送门:https://github.com/hongyangAndroid/android-percent-support-extend
参照父布局使用20%w,参照屏幕29&sw,对于srollview使用srollview嵌套percentLinelayout,内部使用sw
dependencies {    //...    compile 'com.zhy:percent-support-extends:1.0.1'}
<com.zhy.android.percent.support.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <android.support.v4.view.ViewPager
            app:layout_heightPercent="100%"
            app:layout_widthPercent="100%"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_centerInParent="true"
            android:id="@+id/viewpage"></android.support.v4.view.ViewPager>
        <com.zhy.android.percent.support.PercentLinearLayout
            android:background="#FFFFFF"
            app:layout_heightPercent="9.5%h"
            app:layout_widthPercent="100%w"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true">
            <com.zhy.android.percent.support.PercentRelativeLayout

                android:id="@+id/rel_find"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1">
                <ImageView
                    android:layout_centerHorizontal="true"
                    app:layout_heightPercent="42%h"
                    app:layout_widthPercent="42%h"
                    android:background="@drawable/faxian"
                    android:id="@+id/img_find"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_alignParentTop="true"
                    app:layout_marginTopPercent="15%h"/>
                <TextView
                    android:layout_centerHorizontal="true"
                    android:textSize="18.0sp"
                    android:text="发现"
                    android:id="@+id/tex_find"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    app:layout_marginBottomPercent="15%h"/>
            </com.zhy.android.percent.support.PercentRelativeLayout>

            <com.zhy.android.percent.support.PercentRelativeLayout

                android:id="@+id/rel_zhishui"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1">
                <ImageView
                    android:layout_centerHorizontal="true"
                    app:layout_heightPercent="42%h"
                    app:layout_widthPercent="42%h"
                    android:background="@drawable/zhishui"
                    android:id="@+id/img_zhishui"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_alignParentTop="true"
                    app:layout_marginTopPercent="15%h"
                    />

                <TextView
                    android:layout_centerHorizontal="true"
                    android:textSize="18.0sp"
                    android:text="智睡"
                    android:id="@+id/tex_zhishui"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                app:layout_marginBottomPercent="15%h"/>
            </com.zhy.android.percent.support.PercentRelativeLayout>

            <com.zhy.android.percent.support.PercentRelativeLayout

                android:id="@+id/rel_me"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1">
                <ImageView
                    android:layout_centerHorizontal="true"
                    app:layout_heightPercent="42%h"
                    app:layout_widthPercent="42%h"
                    android:background="@drawable/wode"
                    android:id="@+id/img_me"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_alignParentTop="true"
                    app:layout_marginTopPercent="15%h"
                 />
                <TextView
                    android:layout_centerHorizontal="true"
                    android:text="我的"
                    android:textSize="18.0sp"
                    android:id="@+id/tex_me"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    app:layout_marginBottomPercent="15%h"/>
            </com.zhy.android.percent.support.PercentRelativeLayout>
        </com.zhy.android.percent.support.PercentLinearLayout>
    </com.zhy.android.percent.support.PercentRelativeLayout>
<think>好的,我现在需要帮助用户了解如何在UniApp中适配不同设备的样式。首先,我需要回忆UniApp的相关知识,特别是关于样式适配的部分。UniApp是一个使用Vue.js开发跨平台应用的框架,支持一次编写,多端发布,比如iOS、Android、H5以及各种小程序。适配不同设备的样式通常需要考虑屏幕尺寸、分辨率、平台特性等因素。 用户的问题可能集中在如何确保应用在不同设备上显示一致,或者如何根据不同设备调整布局和样式。我需要分步骤解释适配的方法,可能包括使用响应式单位、条件编译、媒体查询、动态样式计算、Flex布局、图片适配、第三方库以及测试方法等。 首先,响应式单位方面,UniApp推荐使用upx(现已改为rpx),这个单位可以根据屏幕宽度自适应。需要解释rpx的原理,比如1rpx等于屏幕宽度的1/750,这样在不同宽度的设备上会自动缩放。 然后是条件编译,UniApp允许根据不同的平台编写特定的代码,比如通过注释来区分iOS、Android或H5的样式。需要举例说明如何使用条件编译来调整样式。 媒体查询也是CSS中常用的方法,可以根据屏幕尺寸应用不同的样式。在UniApp中同样适用,可以结合rpx单位来设置断点,可能需要说明如何在样式文件中使用媒体查询。 动态样式计算可能涉及在Vue的data中根据设备信息设置样式变量,比如通过uni.getSystemInfo获取屏幕宽度,然后计算字体大小或边距。需要给出代码示例,比如在JS中获取信息并在模板中绑定样式。 Flex布局是常用的响应式布局方法,可以自动调整子元素的排列方式,适合不同屏幕尺寸。需要简要介绍Flex的使用,并说明其在UniApp中的优势。 图片适配可能需要使用相对单位,并考虑不同分辨率的图片,比如使用2倍图或3倍图,或者通过缩放属性来调整图片显示。需要提醒用户注意图片在不同设备上的清晰度和尺寸问题。 第三方库如scss/sass可以辅助编写更灵活的样式,比如使用变量和混合宏来管理不同设备的样式。需要提到如何通过预处理器简化适配工作。 测试方面,建议用户使用真机测试和模拟器,查看不同设备上的显示效果,并强调测试的重要性。 需要检查是否有遗漏的适配方法,比如使用uni.css的公共样式库,或者如何处理不同平台的导航栏和状态栏高度差异。例如,在微信小程序中可能需要处理胶囊按钮的位置,而在H5中需要考虑浏览器工具栏的影响。 此外,可能需要提醒用户注意不同平台的样式限制,比如某些CSS属性在小程序中不支持,或者在不同端的表现不一致,这时候可能需要条件编译或额外处理。 还要考虑横竖屏切换时的适配问题,虽然大多数应用锁定竖屏,但如果需要支持横屏,可能需要监听屏幕方向变化并调整布局。 最后,整理这些思路,分步骤组织回答,确保结构清晰,用户能够逐步理解和实施适配方法。需要避免使用专业术语过多,用通俗的语言解释概念,并提供代码示例帮助用户理解。</think>在UniApp中适配不同设备样式,需通过以下步骤实现多端统一显示效果: --- ### 一、基础适配方案 1. **使用响应式单位`rpx`** - `1rpx = 屏幕宽度 / 750`,能根据屏幕宽度自动缩放 - 示例:设计稿宽度750px时,直接按1:1换算 ```css .box { width: 750rpx; } /* 满屏宽度 */ ``` 2. **Flex弹性布局** - 优先使用Flex+百分比布局实现元素自适应 ```css .container { display: flex; justify-content: space-between; } ``` --- ### 二、动态适配策略 3. **条件编译(平台差异化)** ```scss /* #ifdef H5 */ .header { height: 88rpx; } /* H5特殊处理 */ /* #endif */ ``` 4. **JS动态计算样式** ```javascript export default { data() { return { statusBarHeight: 0 } }, onLoad() { const res = uni.getSystemInfoSync() this.statusBarHeight = res.statusBarHeight + 'px' } } ``` 模板绑定: ```html <view :style="{ paddingTop: statusBarHeight }"></view> ``` --- ### 三、进阶适配技巧 5. **媒体查询适配** ```css @media screen and (max-width: 600px) { .sidebar { display: none; } } ``` 6. **图片适配方案** - 使用`<image>`组件的`mode`属性 ```html <image src="logo.png" mode="widthFix"></image> ``` 7. **第三方工具扩展** - 安装`postcss-px-to-viewport`插件自动转换单位 --- ### 四、关键注意事项 1. **状态栏适配** - 通过`uni.getSystemInfoSync()`获取状态栏高度 - 动态设置页面内边距 2. **全面屏适配** ```css .safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } ``` 3. **字体适配公式** ```javascript // 基准字体大小 * (当前设备宽度 / 设计稿宽度) const fontSize = 16 * (screenWidth / 750) ``` --- ### 五、调试验证流程 1. 使用`uni-app`官方模拟器 2. 真机扫码预览测试 3. 开启Chrome移动端调试模式 通过以上方法组合使用,可覆盖90%以上的多端样式适配需求。建议优先使用`rpx+Flex`基础方案,复杂场景配合动态计算和条件编译实现精准适配
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值