CSS网站的CSS网站网站布局，用于双屏幕和可折叠设备
#css #automationtesting #csswebsite #foldabledevices

在市场上引入了越来越多的双屏幕电话，可以说我们正在进入双屏幕设备时代。双屏幕手机对生产力和媒体消费效果非常好。

双屏幕（或可折叠）手机都有所有形式，以适应每个用户的需求。在双屏幕设备中，您可以拥有一部可以折叠成适合您手掌的手机，而在另一侧，您可以拥有一部可以展开的电话，该手机会变成常规平板电脑的大小。

根据2021年的一份报告，双屏幕电话占智能手机总市场的0.5％份额。预计到2025年，这将增长69.9％的复合年增长率。因此，可以说这十年我们将在市场上看到很多可折叠和多杆手机，而且它们将很快成为主流。

但是，随着新的形式，新的屏幕分辨率和前端开发人员的兼容性问题。因此，现在，有了市场上已经存在的设备，前端开发人员还必须在双屏幕设备和可折叠设备上响应他的网站。

因此，考虑到越来越多的多屏或可折叠设备的采用，2020年 Microsoft 宣布了专门为双屏幕电话设计的新Web API。这些新的Web API包括CSS屏幕跨越媒体功能和JavaScript Visual ViewPort segment API，它们可以帮助开发人员在双屏幕电话上增强其网站体验。

在CSS网站布局的此博客中，我们将深入研究这些新宣布的双屏幕网络API，并学习如何使用它们来使您的网站响应良好。最后，我们将举一个博客页面的示例，并使其对双屏幕和可折叠电话响应。如果您是响应式网络设计的新手，请检查Responsive Design的指南。

在与Java教程的Selenium中，您将学习所有需要知道的一切，以启动在Selenium automation testing Java 。

在可折叠或双屏幕设备上造型

您可以将折叠式或双屏幕设备分为两类：

  • 两个单独的屏幕与机械铰链连接。

  • 一个单屏幕，其中实际屏幕从中间折叠。

image

可折叠或双屏幕设备可以具有4个可能的方向

  • 单屏幕肖像模式。

  • 单屏幕景观模式。

  • 双屏幕肖像模式。

  • 双屏幕景观模式。

image

您可以看到，在构建查询时，必须考虑许多视口场景。双屏幕显示的第二个问题是铰链的位置。

Microsoft Duo 2（例如Microsoft Duo 2）等双屏幕手机具有将显示器分为两个逻辑屏幕的机械铰链。铰链的位置正好在中间，因此任何中心内容都隐藏在铰链后面。

React是一个基于JavaScript的移动应用开发框架。了解如何将Appium和Jest用于 React Native Automation testing tools 用于iOS和Android上的应用程序。

image

让我们考虑我们最喜欢的YouTube网站，然后在双屏幕设备上查看它的外观。

image

您可以看到，屏幕在中心分开；因此，铰链背后存在的任何物体都会丢失。对于完全放置在中心的模态或按钮的情况下，此问题变得更糟。

因此，我们需要以一种将内容分解为两个单独的部分，并避免在中心显示任何内容，这与书类似。这种设计非常适合提高用户体验和生产力。

通过将内容分为单独的各个部分，我们可以比通常的单屏幕设备更适合更多信息。

image

在我们进入主题关键之前，让我们谈论浏览器的可用性以及如何在浏览器中的双屏幕设备上测试输出。

在使用Java教程的Selenium中，您将学习所有需要知道的一切，以启动在Selenium automation testing using Java 。

浏览器支持和可用性

目前，所有 chromium 浏览器的所有最新版本都可以使用双屏幕API，例如 Microsoft Edge 和 Google Chrome ，但仍然是在实验阶段中。您需要在浏览器设置中启用这些功能以使用它们。

要启用这些功能，请访问 chrome：// flags 如果您在chrome或 edge上：// flags （如果使用edge）。在搜索栏中，键入实验Web平台功能并更改禁用标志以启用和重新启动浏览器。

image

您可以像其他设备一样使用开发人员工具来测试查询。

在Google Chrome中打开您的网站，然后按 ctrl+shift+i 打开开发人员工具面板。您可以在输出面板中选择双屏幕设备以显示输出。如果您可以找到双屏幕设备，请单击底部的编辑选项，然后将Microsoft Surface Duo添加为新设备。

image

在这里295+ Selenium Interview Questions 带有答案，可以帮助您增强面试的信心。

双屏幕网络

查看市场上可折叠和多屏设备的兴起， Microsoft 在 2020 中宣布了两个新的Web API。这些API与现有的CSS Media Queries和JavaScript Visual ViewPort API集成，因此开发人员可以更多地致力于利用双屏幕空间来获得更好的用户体验，而不是从Scratch中学习一项全新功能。这些双屏幕网络API包括

  • CSS屏幕跨越媒体功能。

  • JavaScript段枚举API。

在CSS网站布局的下一部分中，我们将讨论CSS屏幕跨越媒体功能。

CSS屏幕跨越媒体功能

CSS屏幕跨度媒体功能由专门设计的媒体查询组成，可帮助前端开发人员优化双屏幕或可折叠设备的内容。此新媒体功能是我们用来增加对网站响应能力的现有CSS媒体查询的补充。

如果您不知道CSS中的媒体查询是什么，

媒体查询是根据某些条件应用一组CSS属性的CSS规则。 CSS媒体查询构成了响应式网络设计不可或缺的一部分。

CSS屏幕跨度媒体查询检测您的网站是否是在多屏幕设备上打开的，并基于此设置了样式。此查询有两个变体：

  • horizo​​ntal-surf-segments

  • 垂直视频播放

水平段媒体查询

此CSS屏幕跨度查询用于检查输出设备上可用的水平屏幕的数量。当可折叠设备以双屏幕肖像模式（如一本书）中，该查询是触发的，其中折叠或铰链在中间垂直。

image

语法： 

 @media (horizontal-viewport-segments: count) {
    /* CSS Styles for this posture  */
 }


 /*Here count is the number of screens in this mode */

示例：

让我们设计一个媒体查询，如果以双屏幕肖像模式打开设备，则身体的背景颜色将变为红色，并且水平彼此之间有2个屏幕。

CSS媒体查询： 

@media (horizontal-viewport-segments: 2) {
    body {
        background-color: red;
    }
 }

垂直段媒体查询

垂直段查询用于检查输出设备上可用的垂直屏幕的数量。当可折叠设备以双屏幕景观模式（如垂直书籍）中，该查询是触发的，其中中间存在折叠或铰链水平。

image

语法： 

 @media (vertical-viewport-segments: count) {
    /* CSS Styles for this posture  */
  }


/* Here count is the number of screens in this mode */

让我们设计一个介质查询，如果以双屏幕景观模式打开设备，则身体的背景颜色将变为红色，并且彼此垂直屏幕上有2个屏幕。

示例： 

 @media (vertical-viewport-segments: 2) {
    body {
        background-color: red;
    }
  }

准备好对您的 JUnit interviews question 在2023年，我们的90个问题和答案的全面列表，可以帮助您提高测试技能。 /em>

链接多个查询

您还可以链接CSS屏幕跨越媒体查询，并具有其他条件，例如视口的宽度或高度。

在这里，我们正在编写一个查询，如果垂直视口段为2，则将应用样式，并且该细分市场的最小宽度为400px。

 @media (vertical-viewport-segments: 2) and (min-width: 400px) {
    /* Styles to be applied for this specific condition */
 }

CSS环境变量

与Web API一起，开发人员还可以利用6个新引入的CSS环境变量来计算屏幕上显示区域的几何形状。这些变量可用于

  • 获取屏幕的显示区域

  • 计算铰链的几何形状（如果存在）

  • 对屏幕上的内容对齐

/* Get segment Width */
env(viewport-segment-width <x> <y>);


/* Get segment Height */
env(viewport-segment-height <x> <y>);


/* Get position of top */
env(viewport-segment-top <x> <y>);


/* Get position of left */
env(viewport-segment-left <x> <y>);


/* Get position of bottom */
env(viewport-segment-bottom <x> <y>);


/* Get position of right */
env(viewport-segment-right <x> <y>);

x和y位置表示左上角的2D网格与中心（0,0）的坐标。使用这些位置，可以将屏幕分为两个单独的区域，用0和1表示。

。

image

示例：

在双肖像模式下表示左屏幕的宽度：

  env(viewport-segment-width 0 0);

在双肖像模式下表示右屏幕的宽度。

 env(viewport-segment-width 1 0)

在双景观模式下表示顶屏幕的宽度。

  env(viewport-segment-width 0 0);

在双景观模式下表示底部屏幕的宽度。

  env(viewport-segment-width 0 1);

同样，我们可以使用这些变量获得高度和角位置。让我们看一下以双屏幕肖像模式使用设备时如何计算铰链宽度。

要获得铰链的宽度，我们必须首先获得铰链的左上角和右上角的位置。

image

env(viewport-segment-right 0 0);
/* Top left corner of hinge*/


env(viewport-segment-left 1 0);
/* Top right corner of hinge*/

从左屏幕的右角减去右屏幕的左角，将使您获得铰链的宽度。

width of hinge=calc(env(viewport-segment-left 1 0) - 
               env(viewport-segment-right 0 0))

同样，您可以通过
获得铰链的高度 

height of hinge = calc(env(viewport-segment-top 0 1) -     
                       env(viewport-segment-bottom 0 0))

您可以将高度作为值传递给CSS属性。

div{
    margin-top: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
}

TestNG interview questions 的详尽列表将有助于您加强作为Testng访谈的候选人的地位。

JavaScript视觉视口段API

在开发人员无法使用CSS检测可折叠或双屏幕设备的情况下，他可以使用JavaScript visualViewport.segments.segments api。

image

来源

在初始草稿中，提出了一个全新的JavaScript API，称为JavaScript Windows段枚举API。但是，在从开发人员社区获得反馈之后，他们决定在现有的 Visual Viewport API中实施它。

VisualViewPort API 表示屏幕的视觉视口。 API具有

之类的属性

  • VisualViewport.width '返回视口宽度

  • VisualViewport.height '返回视口高度

  • visualViewport.scale '返回缩放因子

  • VisualViewPort.OffSetleft '返回左边缘的偏移

  • VisualViewPort.OffSettop '返回顶部边缘的偏移

  • VisualViewport.pageleft '返回顶部边缘的X坐标

  • VisualViewport.pagetop '返回顶部边缘的y坐标

除了现有属性外，还引入了一个名为VisualViewPort。的新属性。该属性提供了使用浏览器的设备上可用的细分计数。

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visual Viewport API DEMO.</title>


</head>


<body>
    <script>


    let screens = window.visualViewport.segments;


    console.log(screens);

    </script>
    <h1>Check Console</h1>


</body>


</html>

输出：

image

window.visualviewport.segments 属性返回一个数组，其中包含浏览器跨越的DOMRECT。每个 domrect 对象都包含每个屏幕的高度和宽度，以及其X，Y，左，右，顶部和底部坐标。使用这些坐标，您可以轻松地计算铰链的宽度和高度。如果显示数为1。

，查询将返回 null 值

因此，如果以双屏幕肖像模式打开的Microsoft Surface Duo，则从 window.visualviewport.segments 返回的值将是一个数组，其中2个代表屏幕的值。第一个对象表示左/顶屏幕，第二个对象表示右/底部屏幕。对于单个视口（台式机，移动，笔记本电脑），段的值将为null。

查询对象属性时，返回的值是设备状态的不变快照。因此，如果设备旋转或更改了显示的状态，则该值将不再有效。在这种情况下，我们可以添加一个调整大小的事件侦听器，并通过一个可以计算可用段数量的函数。

示例： 

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dual Screen APIs.</title>


</head>


<body>


    <h1>JavaScript's Viewport segment API for Dual Screen devices</h1>


</body>


</html>
    <script>


        let screens;


        // runs every time the user resizes the window
        window.addEventListener('resize', () => {
            screens = window.visualViewport.segments;
            //to check if screens array is null(If null it means its a single screen device)
            if (screens) {
                console.log(screens.length);
            }
            else {
                console.log("Opened in Single Screen mode")
            }
        });


    </script>

输出：

image

let screens;

        // runs everytime the user resizes the window
        window.addEventListener('resize', () => {
            screens = window.visualViewport.segments;
            //to check if screens array is null(If null it means its a single screen device)
            if (screens) {
                console.log(screens.length);
            }
            else {
                console.log("Opened in Single Screen mode")
            }
        });

Jasmine Interview questions 的这份问卷将有助于您对茉莉花和如何破解面试。

演示：使用CSS网站布局构建一个简单的博客页面

在CSS网站布局的此博客的这一部分中，我们将演示如何使用CSS网站布局构建一个简单的博客页面。

现在，我们知道双屏幕网络API，让他们通过构建一个小型项目来测试我们的知识。我们将构建一个简单的博客页面，我们将尝试对双屏幕进行响应。让我们先看一下设计。

image

让我们首先从HTML开始。我们有一个标题，图像，一些虚拟内容和3张图像卡。

html： 

<body>
<section>
    <main>
        <h1 class="heading">This is my first blog about my trip to the mountains</h1>
         <img
                src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg?auto=compress&cs=tinysrgb&w=1600" />
        </main>


    <article>
        <p class="itallic">
            "Some Dummy Content Here"
        </p>
        <p class="content">
            <!--Some Dummy Content here-->
        </p>
        <p class="content">
            <!--Some Dummy Content here-->
        </p>
        <p class="content">
            <!--Some Dummy Content here-->
        </p>
        <h2>Recent Posts</h2>
        <div class="row">
            <div class="card">
                    <img src="https://images.pexels.com/photos/1021808/pexels-photo-1021808.jpeg?auto=compress&cs=tinysrgb&w=1600"
  pre                      alt="">
                    <p>My First trip to the mountains</p>
                </div>
                <div class="card">
                    <img src="https://images.pexels.com/photos/457878/pexels-photo-457878.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the beach</p>
                </div>
                <div class="card">
                    <img src="https://images.pexels.com/photos/220201/pexels-photo-220201.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the space</p>
                </div>


        </div>
    </article>
</section>


</body>

对于CSS，我使用Flexbox来对齐内容。如果您对网格更舒适，则可以使用CSS Grid。

CSS： 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'DM Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}
section {
    max-width: 1200px;
    padding: 3rem 0;
}
img {
    width: 100%;
    border-radius: 10px;
}
h1 {
    font-size: 4rem;
}
.heading,
.itallic,
.content,
h2 {
    margin: 2rem 0;
}
.itallic {
    font-style: italic;
    color: gray;
}
.row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.card {
    width: 30%;
}
.card p {
    font-size: 1.2rem;
}

这是我们到目前为止所完成的。干净简单的设计。

image

准备王牌您的 NUnit interviews questions 使用我们的详尽解决方案，这将使您能够证明您对Nunit Testing框架的命令。

博客的基本布局已经完成。是时候增加对我们博客的响应能力了。让我们从添加移动和平板电脑设备的媒体查询开始。

/* media queries for mobile devices */
@media screen and (max-width: 480px) {
    section {
        padding: 1rem;
    }


    h1 {
        font-size: 2rem;
    }


    .row {
        display: flex;
        flex-direction: column;
    }


    .card {
        width: 100%;
        margin: 1rem 0;
    }
}


/* media queries for tablet and small laptops*/
@media screen and (min-width:480px) and (max-width: 1200px) {
    section {
        padding: 2rem;
    }
    h1 {
        font-size: 3rem;
    }
}

输出：

image

我正在使用LT Browser检查各种设备视口上CSS网站布局的输出。如您所见，我可以在笔记本电脑和移动视口上测试响应能力。

lt浏览器是mobile-friendly test工具，使您能够执行CSS网站布局的responsive testing，并保证在不同设备视口上的布局适应性。使用LT浏览器，您可以评估网站对50多个预配置设备视口的响应能力，包括智能手机，平板电脑，笔记本电脑和台式机。

浏览您的 Laravel interview questions 轻松！我们的指南涵盖了超过190个问题，以帮助您获得理想的技术工作。

现在，让我们继续遵循CSS网站布局的本教程的目标，这是双屏幕响应。但是在此之前，让我们看看我们的博客页面的外观，而无需在CSS网站布局的下一部分中添加媒体查询以显示双屏幕。

image

您可以看到，内容已被铰链阻止。这是我希望该网站在双屏幕显示上的设计的设计。

image

image

我们从双屏幕肖像模式开始，然后移至双屏幕景观模式。

首先，我们需要将博客内容的挠性方向更改为行格式，以便我们可以获得带有图像的两列布局，并在左侧朝左侧的内容。

@media (horizontal-viewport-segments: 2) {
    section {
        display: flex;
        padding: 0;
    }
}

输出：

image

您可以看到，内容是连续弯曲的，但仍然不像我们想要的那样。让我们设置包含图像的元素的宽度，并将其同等地标向左屏幕的宽度。我们将使用env变量获取左屏幕的宽度。

main {
    min-width: env(viewport-segment-width 0 0);
}

我们将对文本内容进行相同的操作。我们将将最小内容宽度设置为右侧的屏幕宽度。

article {
    min-width: env(viewport-segment-width 1 0);


}

输出：

image

结果看起来比我们在CSS网站布局上的博客中启动的要好得多，但是该设计仍需要改进。如果仔细观察，内容的左侧部分将被铰链阻塞。它在铰链后面；因此，它是从屏幕上裁剪的。

我们可以通过在文章标签中添加边距左侧来解决。此保证金值应等于铰链的宽度。

article {
    margin-left: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
    width: env(viewport-segment-width 0 1);
    padding: 1rem;
}

输出：

image

您走了，我们使我们的博客页面对双屏幕设备有反应。您可以在我的Codepen上查看简单博客的代码。现在，让我们进入第二种模式的双屏幕景观模式。在这里，我们需要进行一些对齐以正确显示内容。

image

CSS： 

/* Media queries for double portrait mode: ( Dual Screen Book mode) */
@media (vertical-viewport-segments: 2) {
    section {
        padding: 0;
    }  
    main {
        width: env(viewport-segment-width 0 0);
        text-align: center;
        min-height: env(viewport-segment-height 0 0);
        padding: 1rem;
    }
    h1 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    main>img{
        width: 80%;
    }
    article {
        width: env(viewport-segment-width 0 1);
        padding: 1rem;
        margin-top: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
    }
    .row {
        display: flex;
    }
    .card {
        width: 30%;
    }
    .card img{
        width: 100%;
    }
}

在CSS网站布局的此博客的这一部分中，顶部跨越整个顶部屏幕，并为底部屏幕上的内容添加了一个保证金顶，以使文本不会隐藏在铰链后面。<<<<<<<<< /p>

输出：

image

  <link
        href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
<body>

    <section>
        <main>
            <h1 class="heading">This is my first blog about my trip to the mountains</h1>
            <img
                src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg?auto=compress&cs=tinysrgb&w=1600" />
        </main>
        <article>
            <p class="itallic">"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque expedita asperiores laudantium natus
                enim, placeat iure! Iure sapiente fugiat iusto. Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
                maxime accusamus eius repellendus dolor modi esse temporibus, amet voluptas itaque!"</p>
            <p class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Error sequi quibusdam, esse illo distinctio quas culpa
                aspernatur nostrum, et veritatis neque sapiente! Ducimus tempore maxime obcaecati modi, deleniti commodi possimus
                cupiditate, veniam architecto voluptatibus ipsa cum tempora nobis dolorem explicabo ipsum aliquid, non molestias
                veritatis quam consectetur quia fugit? Laborum, laboriosam voluptatem. Sit corporis quod cumque cupiditate
                dignissimos, aliquam nulla voluptas ea autem debitis dolorum sunt, ratione doloremque velit porro accusantium
                consequuntur et? Enim dolorum iure officia, animi nam rem quas distinctio at aliquam ipsum quos deleniti placeat.
                Quas nisi cumque eligendi sapiente, dolorum consectetur provident quos itaque magni porro.</p>
            <p class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt dicta vitae voluptates, saepe accusamus labore nisi
                qui repellat asperiores quaerat, unde sint quae? Eos sed voluptatibus consectetur ducimus, quaerat illo similique
                nemo iure perferendis corrupti quidem quasi explicabo architecto id debitis recusandae eum ab molestias assumenda
                animi nesciunt vero ut!
            </p>
            <p class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, eius? Facilis pariatur, fugit doloremque eveniet
                temporibus quisquam nesciunt architecto accusantium aut neque magnam nemo excepturi. Temporibus, a rerum quae
                expedita sapiente est voluptates, laborum qui, explicabo molestiae corrupti atque fugit quam laudantium cupiditate
                nihil minima unde non dolorum esse numquam culpa. Quas libero optio doloremque debitis adipisci vero mollitia.
                Tenetur autem quasi consequatur dicta, aliquid non?
            </p>
            <h2>Recent Posts</h2>
            <div class="row">
                <div class="card">
                    <img src="https://images.pexels.com/photos/1021808/pexels-photo-1021808.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the mountains</p>
                </div>
                <div class="card">
                    <img src="https://images.pexels.com/photos/457878/pexels-photo-457878.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the beach</p>
                </div>
                <div class="card">
                    <img src="https://images.pexels.com/photos/220201/pexels-photo-220201.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the space</p>
                </div>

            </div>
        </article>
    </section>

</body>

ace your Unit testing interviews 通过我们的全面面试问题和单位测试的解决方案，涵盖了从语法到高级技术的主题。 < < /strong>

现在在大多数情况下，我们所做的就足够了。但是我想走一步思考UX。在CSS网站布局的此博客的这一部分中，我们还没有充分利用多屏幕设置。

当我们滚动时，两个屏幕都以双屏幕肖像模式滚动。因此，丢失了图像，左屏幕为空白。如果我们粘贴图像并朝一个屏幕上行驶并允许用户仅滚动文本区域（右屏幕）。

，那会更好。

最终输出：

我认为，这看起来比以前的更好。我可以将图像重点放在显示屏的一侧，同时允许用户从另一侧读取内容。

CSS（用于上述输出）： 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'DM Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}


section {
    max-width: 1200px;
    padding: 3rem 0;
}


img {
    width: 100%;
    border-radius: 10px;
}


h1 {
    font-size: 4rem;
}


.heading,
.itallic,
.content,
h2 {
    margin: 2rem 0;
}


.itallic {
    font-style: italic;
    color: gray;
}


.row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}


.card {
    width: 30%;
}


.card p {
    font-size: 1.2rem;
}


/* media queries for mobile devices */
@media screen and (max-width: 480px) {
    section {
        padding: 1rem;
    }


    h1 {
        font-size: 2rem;
    }


    .row {
        display: flex;
        flex-direction: column;
    }


    .card {
        width: 100%;
        margin: 1rem 0;
    }
}


/* media queries for tablets and small laptops*/
@media screen and (min-width:480px) and (max-width: 1200px) {
    section {
        padding: 2rem;
    }


    h1 {
        font-size: 3rem;
    }
}
/* Media queries for double portrait mode: ( Dual Screen Book mode) */
@media (horizontal-viewport-segments: 2) {
    section {
        display: flex;
        padding: 0;
        position: relative;
    }


    main {
        width: env(viewport-segment-width 0 0);
        padding: 1rem;
        height: env(viewport-segment-height 0 0);
        position: fixed;
    }


    article {
        margin-left: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0) + env(viewport-segment-width 0 0));
        width: env(viewport-segment-width 0 1);
        padding: 1rem;
        overflow: scroll;


    }


    .row {
        display: flex;
        flex-direction: column;
    }


    .card {
        width: 100%;
        margin: 1rem 0;
    }
}


/* Media queries for double landscape mode: ( Dual Screen laptop mode) */
@media (vertical-viewport-segments: 2) {
    section {
        padding: 0;
        position: relative;
    }


    main {
        width: env(viewport-segment-width 0 0);
        text-align: center;
        height: env(viewport-segment-height 0 0);
        padding: 1rem;
        position: fixed;
        background-color: #fff;
    }


    h1 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }


    main>img {
        width: 80%;
    }


    article {
        width: env(viewport-segment-width 0 1);
        padding: 1rem;
        margin-top: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0) + env(viewport-segment-height 0 0));
    }


    .row {
        display: flex;
    }


    .card {
        width: 30%;
    }


    .card img {
        width: 100%;
    }
}

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Blog.</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
        <link rel="stylesheet" href="./style.css">
</head>

<body>

    <section>
        <main>
            <h1 class="heading">This is my first blog about my trip to the mountains</h1>
            <img
                src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg?auto=compress&cs=tinysrgb&w=1600" />
        </main>
        <article>
            <p class="itallic">"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque expedita asperiores laudantium natus
                enim, placeat iure! Iure sapiente fugiat iusto. Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
                maxime accusamus eius repellendus dolor modi esse temporibus, amet voluptas itaque!"</p>
            <p class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Error sequi quibusdam, esse illo distinctio quas culpa
                aspernatur nostrum, et veritatis neque sapiente! Ducimus tempore maxime obcaecati modi, deleniti commodi possimus
                cupiditate, veniam architecto voluptatibus ipsa cum tempora nobis dolorem explicabo ipsum aliquid, non molestias
                veritatis quam consectetur quia fugit? Laborum, laboriosam voluptatem. Sit corporis quod cumque cupiditate
                dignissimos, aliquam nulla voluptas ea autem debitis dolorum sunt, ratione doloremque velit porro accusantium
                consequuntur et? Enim dolorum iure officia, animi nam rem quas distinctio at aliquam ipsum quos deleniti placeat.
                Quas nisi cumque eligendi sapiente, dolorum consectetur provident quos itaque magni porro.</p>
            <p class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt dicta vitae voluptates, saepe accusamus labore nisi
                qui repellat asperiores quaerat, unde sint quae? Eos sed voluptatibus consectetur ducimus, quaerat illo similique
                nemo iure perferendis corrupti quidem quasi explicabo architecto id debitis recusandae eum ab molestias assumenda
                animi nesciunt vero ut!
            </p>
            <p class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, eius? Facilis pariatur, fugit doloremque eveniet
                temporibus quisquam nesciunt architecto accusantium aut neque magnam nemo excepturi. Temporibus, a rerum quae
                expedita sapiente est voluptates, laborum qui, explicabo molestiae corrupti atque fugit quam laudantium cupiditate
                nihil minima unde non dolorum esse numquam culpa. Quas libero optio doloremque debitis adipisci vero mollitia.
                Tenetur autem quasi consequatur dicta, aliquid non?
            </p>
            <h2>Recent Posts</h2>
            <div class="row">
                <div class="card">
                    <img src="https://images.pexels.com/photos/1021808/pexels-photo-1021808.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the mountains</p>
                </div>
                <div class="card">
                    <img src="https://images.pexels.com/photos/457878/pexels-photo-457878.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the beach</p>
                </div>
                <div class="card">
                    <img src="https://images.pexels.com/photos/220201/pexels-photo-220201.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the space</p>
                </div>

            </div>
        </article>
    </section>

</body>

双屏幕API仍处于实验阶段；因此，这些API将在现实世界设备中工作。在这种情况下，您可以使用视口段polyfill。该多填充是JavaScript视口段API的替代方法。跨越媒体查询的CSS仍然没有其他API。

另一种选择是使您的网站对手机等手持设备的响应良好。因此，用户可以在单个屏幕上查看网站，而不是在两个屏幕上跨越它。

该问卷打算提供一些最常见的 Jenkins interview questions 帮助求职者准备面试。

双屏幕显示UX

通过引入设备的新形式，开发人员构建其应用程序和网站的新挑战，这些应用程序和网站在此类设备上都可以很好地适应和运行。但是，随着挑战，还有新的机会展示其创造力并使用额外的空间。但是，如何使您的网站或应用更好地用于双屏幕？

首先，考虑如何充分利用双屏幕。双屏幕意味着额外的屏幕房地产以适合您的内容。考虑通过显示更多内容和更好的可访问性来使用户变得轻松。

示例：

让您说您正在创建一个应用程序或Instagram或Facebook等网站。在这样的应用程序中，您可以创建一个单个照片屏幕，以便在左屏幕上显示图像标题，评论和喜欢的时，帖子图像已固定在左侧。这使用户比常规设计吸收更多的内容。用户无需在下面滚动即可查看评论。他可以检查屏幕上的图像的评论。

可以为播放YouTube等视频网站做类似的操作，您可以在一个屏幕上播放视频，并评论，描述以及与另一个屏幕上帖子相关的其他重要元数据。从而改善用户体验。

这里是前30个+ CI/CD Interview Questions 和答案，这将帮助您增强对面试的信心。

包裹起来

在2022年，超过60％的网络流量通过移动设备。随着设备的发展，每个开发人员和设计师都必须适应更改。

在CSS网站布局的此博客中，我们讨论了新一代设备，可折叠和双屏幕设备。我们了解为什么要设计可折叠或双屏幕设备很困难，以及新的CSS媒体查询如何解决我们的问题。然后，我们看到了新查询的示例以及如何使用它们。后来，我们构建了一个小博客页面，并使其对双屏幕设备响应。

因此，下次您在网站上工作时，不要忘记测试双屏幕设备上CSS网站布局的响应能力。希望您在CSS网站布局上找到此博客有帮助。愉快的编码！