Responsive design which sizes

The scaling algorithm ensures that a 24 px font on Surface Hub 10 feet away is just as legible to the user as a 24 px font on 5" phone that's a few inches away.

Because of how the scaling system works, when you design your UWP app, you're designing in effective pixels, not actual physical pixels. Effective pixels epx are a virtual unit of measurement, and they're used to express layout dimensions and spacing, independent of screen density. In our guidelines, epx, ep, and px are used interchangeably.

You can ignore the pixel density and the actual screen resolution when designing. Instead, design for the effective resolution the resolution in effective pixels for a size class for details, see the Screen sizes and breakpoints article.

When creating screen mockups in image editing programs, set the DPI to 72 and set the image dimensions to the effective resolution for the size class you're targeting. The sizes, margins, and positions of UI elements should always be in multiples of 4 epx in your UWP apps.

Using multiples of four aligns all UI elements with whole pixels and ensures UI elements have crisp, sharp edges. Note that text doesn't have this requirement; text can have any size and position. Feedback will be sent to Microsoft: By pressing the submit button, your feedback will be used to improve Microsoft products and services. Privacy policy. The middle section will span 6 columns. The first section will span 3 columns, the second will span 9, and the third section will be displayed below the first two sections, and it will span 12 columns:.

There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups:. Media queries can also be used to change layout of a page depending on the orientation of the browser. You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation:.

We just launched W3Schools videos. Get certified by completing a course today! If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:. Margins Margin Collapse. Float Clear Float Examples. By using a flexible grid, you only need to add in a breakpoint and change the design at the point where the content starts to look bad.

For example, if the line lengths become unreadably long as the screen size increases, or a box becomes squashed with two words on each line as it narrows. In the early days of responsive design, our only option for performing layout was to use floats. In his original piece on fluid grids, Marcotte detailed a formula for taking a layout designed using pixels and converting it into percentages. For example, if our target column size is 60 pixels, and the context or container it is in is pixels, we divide 60 by to get a value we can use in our CSS, after moving the decimal point two places to the right.

This approach will be found in many places across the web today, and it is documented here in the layout section of our Legacy layout methods article. It is likely that you will come across websites using this approach in your work, so it is worth understanding it, even though you would not build a modern site using a float-based flexible grid.

The following example demonstrates a simple responsive design using Media Queries and a flexible grid. On narrow screens the layout displays the boxes stacked on top of one another:.

Note: You can find the live example and source code for this example on GitHub. Modern layout methods such as Multiple-column layout , Flexbox , and Grid are responsive by default. They all assume that you are trying to create a flexible grid and give you easier ways to do so. The oldest of these layout methods is multicol — when you specify a column-count , this indicates how many columns you want your content to be split into.

The browser then works out the size of these, a size that will change according to the screen size. If you instead specify a column-width , you are specifying a minimum width. The browser will create as many columns of that width as will comfortably fit into the container, then share out the remaining space between all the columns. Therefore the number of columns will change according to how much space there is. In Flexbox, flex items will shrink and distribute space between the items according to the space in their container, as their initial behavior.

By changing the values for flex-grow and flex-shrink you can indicate how you want the items to behave when they encounter more or less space around them. In the example below the flex items will each take an equal amount of space in the flex container, using the shorthand of flex: 1 as described in the layout topic Flexbox: Flexible sizing of flex items.

Note: As an example, we have rebuilt the simple responsive layout above, this time using flexbox. You can see how we no longer need to use strange percentage values to calculate the size of the columns: example , source code. The next example creates a grid container with three tracks sized at 1fr. This will create three column tracks, each taking one part of the available space in the container. You can find out more about this approach to create a grid in the Learn Layout Grids topic, under Flexible grids with the fr unit.

Note: The grid layout version is even simpler as we can define the columns on the. The simplest approach to responsive images was as described in Marcotte's early articles on responsive design. Basically, you would take an image that was at the largest size that might be needed, and scale it down.

This is still an approach used today, and in most stylesheets, you will find the following CSS somewhere:. There are obvious downsides to this approach.

The image might be displayed a lot smaller than its intrinsic size, which is a waste of bandwidth — a mobile user may be downloading an image several times the size of what they actually see in the browser window.

In addition, you may not want the same image aspect ratio on mobile as on desktop. For example, it might be nice to have a square image for mobile, but show the same scene as a landscape image on desktop. Or, acknowledging the smaller size of an image on mobile you might want to show a different image altogether, one which is more easily understood at a small screen size.

These things can't be achieved by scaling down an image. You can provide multiple sizes along with "hints" meta data that describes the screen size and resolution the image is best suited for , and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using. You can also art direct images used at different sizes, thus providing a different crop or completely different image to different screen sizes.

An element of responsive design not covered in earlier work was the idea of responsive typography. Essentially, this describes changing font sizes within media queries to reflect lesser or greater amounts of screen real estate. In this example, we want to set our level 1 heading to be 4rem , meaning it will be four times our base font size.