zoukankan      html  css  js  c++  java
  • UWP开发-自适应布局

    了解css的人知道,对于不同的屏幕尺寸,css使用一种名为媒体查询的东东来适用不同的屏幕尺寸,以提升用户体验。当用户使用PC等大屏幕的设备时,网页将呈现一种布局形式;而当用户使用手机等小屏幕设备时,布局将发生变化,比如将原来的两列布局变为一列。

    就是这个!

    @media screen and (min-600px) {
      nav {
        float: left;
        width: 25%;
      }
      section {
        margin-left: 25%;
      }
    }
    @media screen and (max-599px) {
      nav li {
        display: inline;
      }
    }

    参考链接:http://zh.learnlayout.com/media-queries.html

         https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

    当然,作为宣称跨设备的UWP,也有对应的机制,这就是UWP的自适应布局。

    UWP的自适应布局十分简单,只在XAML里面写就好,使得我们再也不会因为用户使用手机时,某些UI元素被掩盖或者变得异常丑陋,或者在C#里面处理这些破事啦。

    一个例子:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="VisualStateGroup">
                    <VisualState x:Name="Narrow">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="0"/>
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="img.Width" Value="40"/>
                            <Setter Target="tb.FontSize" Value="14"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Wide">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="800"/>
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="img.Width" Value="80"/>
                            <Setter Target="tb.FontSize" Value="24"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Image x:Name="img"
                   Source="Assets/logo.png"
                   Grid.Row="1"/>
            <TextBlock x:Name="tb"
                       Grid.Row="2"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       TextWrapping="Wrap"
                       Text="微软开发者峰会明天就开了,土鳖只能看直播了"/>
        </Grid>

    运行结果:

    (大屏幕)

    (小屏幕)

    解释一下XAML,实际上十分简单。在这个例子里,我们需要注意几点:视觉状态管理器(VisualStateManager),自适应触发器(AdaptiveTiggers),在设置器(Setter)中对相应元素属性的值赋值即可,就像上面的那样。

    当然,你也可以对特定设备写特定的布局。比如你希望在pc上将一个按钮放在标题附近,但是在mobile上,为了操作方便,你希望将这个按钮放在最下面,方便用户的点击,这里我提供一篇博客,写的非常好。

    对特定设备定制特定布局 链接:http://igrali.com/2015/08/02/three-ways-to-set-specific-devicefamily-xaml-views-in-uwp/

  • 相关阅读:
    leetcode Convert Sorted List to Binary Search Tree
    leetcode Convert Sorted Array to Binary Search Tree
    leetcode Binary Tree Level Order Traversal II
    leetcode Construct Binary Tree from Preorder and Inorder Traversal
    leetcode[105] Construct Binary Tree from Inorder and Postorder Traversal
    证明中序遍历O(n)
    leetcode Maximum Depth of Binary Tree
    限制 button 在 3 秒内不可重复点击
    HTML 和 CSS 画三角形和画多边行基本原理及实践
    在线前端 JS 或 HTML 或 CSS 编写 Demo 处 JSbin 与 jsFiddle 比较
  • 原文地址:https://www.cnblogs.com/mengnan/p/5547000.html
Copyright © 2011-2022 走看看