Responsive layout design is a design that responds to user devices based on the screen resolution of a user's device. This means that, whether a user browses a Web page on a mobile, flat, or desktop device, the design will display a specific layout based on the device's screen resolution, thus responding appropriately to the device.
The framework's documentation actually combines the JQuery Mobile framework with the CSS3 media query to implement its own response design. How to react to different screen resolutions.
Without a custom style, our grid will have 3 columns of layout in all the screen widths:
In our custom style, we want this mesh to overlay in a narrow width, and then switch to a standard 3-column layout. In a wide screen width, we want the first column to occupy a width of 50%, so that:
To achieve this, we need to customize a new class name, such as "My-breakpoint".
This class is used in the range of styles in custom media queries, and they will only apply when this class is added to the grid container. Media Enquiries package We only want 50em to apply the following terms of style.
In your media query, use the EM element instead of the pixel to ensure that the media query considers the font size in addition to the screen width. Calculated at the EMS screen width, the pixel's target width is 16, which is the body's default font size.
HTML5 section:
<div class= "Ui-grid-b my-breakpoint" > <div class= "ui-block-a" >block a</div> class = "Ui-block-b" >block b</div> <div class= "ui-block-c" >block c</div> -/grid-b-->
CSS3 section:
@media all and (max-width:50em) {
. my-breakpoint. Ui-block-a,
. My-breakpoint. Ui-block-b,
. My-breakpoint . ui-block-c,
my-breakpoint. ui-block-d,
. My-breakpoint. ui-block-e {
width:100%;
Float:none
}
}
In this media query, we set the width to 100% and negate the floating properties, 50em screen widths. These rules apply to the style of each grid type that is ui-block-a to ui-block-e by all classes in the stacking selector grid.
That is to make the grid responsive and add extra style rules, and each breakpoint is easier to change. We encourage you to create multiple custom breakpoints that you need according to your unique content and layout.
Add a widescreen breakpoint adjustment rate
Based on the above example, we can add an extra break point width to make the first column width 50%, the other two more than 25% 75em (1200 pixels) by the extra minimum Width media query to adjust the width in the custom style just like this:
@media all and (min-width:75em) {
. my-breakpoint.ui-grid-b. ui-block-a {width:49.95%}
. My-breakpoint.ui-grid-b. Ui-block-b,
. My-breakpoint.ui-grid-b. ui-block-c {width:24.925%;}
. My-breakpoint.ui-grid-b. ui-block-a {Clear:left}}
}
Note: A slightly narrower width is set to work across platforms in rounding problems.
Apply a custom breakpoint Ui-responsive
Using this preset breakpoint, add the Ui-responsive class to the grid container, which will be stacked to render the following 560px (35EM). If this breakpoint does not work for your content, we encourage you to write a custom breakpoint as described above.
<div class= "Ui-grid-b ui-responsive" >
These are standard grids that are made by ui-responsive (interface reaction, custom class, as above example My-breakpoint) to respond to class grid containers
Example:
<!doctype html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
