HTML5/CSS:根据更改的页面大小更新布局吗? [英] HTML5/CSS: update layout according to changing page size?

问题描述

任何人都可以指出我关于响应式网页设计的良好教程/指南吗?

Can anyone point me to a good tutorial/guide on responsive webpage design?

我对基础知识非常熟悉，但是我特别希望找到以下内容:我看到响应式网页在调整浏览器窗口大小时不仅会流畅地"调整自身(我是这种响应式设计，足够熟悉并且可以轻松设置).相反，他们要做的是保持其原始(也就是最大)的布局​​，直到浏览器窗口达到某个较小的尺寸，然后页面对齐到另一个布局中，从而完美地容纳了较小的浏览器窗口.此项更改不仅包括布局，还包括可见的项目数，以及其他UI元素的激活，使在较小窗口中的导航更加容易.

I am pretty familiar with the basics but here's what I'm looking for in particular: I have seen responsive webpages that don't just adjust themselves "fluidly" as the browser window is resized (this kind of responsive design I am sufficiently familiar with and can set up easily). What they did instead was to maintain their original (aka biggest) layout until the browser window reached a certain smaller size and then the page snapped into a different layout, perfectly accommodating the smaller size of the browser window. This change included not only the layout but also the number of items visible and the activation of additional UI elements to make navigation in the smaller window easier.

想象一下在窗口中并排放置的扑克牌.假设当窗口处于全屏模式时，有5张卡片可以并排放置.现在想象一下窗口的大小已减小.布局保持不变，直到第一张和最后一张卡几乎都在可见区域之外.当窗口达到该大小时，页面会捕捉"到不同的布局，现在仅在中间显示3张卡片，左右边缘出现箭头，表示用户可以滚动到更多卡片.这种响应式设计如何完成?

Imagine playing cards layed out next to each other in the window. Let's assume 5 cards fit next to each other when the window is in full screen mode. Now imagine the window is decreased in size. The layout stays the same until the first and the last card are almost out of the visible area. As the window gets to that size, the page "snaps" to a different layout, now only displaying the 3 cards in the center with arrows appearing on the left and right edges to signify that there are more cards to which the user can scroll. How is this kind of responsive design done?

推荐答案

您要描述的定位行为是通过使用媒体查询为不同的屏幕尺寸定义不同的样式来实现的.

The snapping into place behavior you're describing is achieved by using media queries to define different styles for different screen sizes.

例如:

@media screen and (min-width: 480px) {
    .nav {
        float: none;
    }
}

@media screen and (min-width: 620px) { 
    .nav {
        float: left;
    }
}

这里是开始学习的好地方.

这篇关于HTML5/CSS:根据更改的页面大小更新布局吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！