Brief Introduction to responsive Layout Design for jQuery mobile web development-jquery-js tutorial

This article mainly introduces the responsive layout design of jQuery mobile web development. jQuery is the most popular module or class library in the JavaScript world, if you need it, you can refer to the responsive layout design. It is a design that responds to your device according to the screen resolution of your device. This means that whether users are browsing Web pages on mobile devices, tablets or desktop devices, the design will display a specific layout based on the screen resolution of the device, so as to respond appropriately to the device.

The documentation of this framework actually uses the jQuery Mobile framework and CSS3 media query to implement its own responsive design. The response method to different screen resolutions.

Without a custom style, our grid will layout 3 columns across all screen widths:

In our custom style, we want this mesh to be superimposed on a narrow width and then switched to a standard 3-bar layout. In a wide screen width, we want the first column to occupy 50% in width, as shown in the following code:

To achieve this, we need to customize a new class name, such as "my-breakpoint ".
This class is used for range styles in custom media queries and they will only apply when this class is added to a grid container. We only want to apply the following conditions to the style of the media query package: 50em.
In your media query, use the EM unit instead of the pixel to ensure that the font size of the media query is considered in addition to the screen width. Calculate the screen width in EMS, and set the target width of the pixel to 16, which is the default font size of the body.

HTML5 part:

 
Block A
 
Block B
 
Block C

 

CSS3:

@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 the negative floating property to 50 em screen width. These rules apply to the style from all class UIS-block-a to ui-block-e of each grid type from Stack selector mesh.
That is to make the grid response and add additional style rules, making it easier to change each breakpoint. We encourage you to create multiple custom breakpoints based on your unique content and layout needs.

Add a wide screen breakpoint adjustment ratio

Based on the above example, we can add an additional breakpoint to make the width of the first column 50%, and the other two 25% or more 75em (1200 pixels) adjust the width in the Custom style by using the extra minimum width media query:

@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: The slightly narrow width is set to cross-platform that works on rounding issues.

Application custom breakpoint ui-responsive

Use this preset breakpoint to add the ui-responsive class to the Grid container and present the stack to the following 560px (35em ). If this breakpoint is not suitable for your work, we encourage you to write a custom breakpoint as described above.

These are standard mesh containers that are made by the ui-responsive (interface response, custom class, my-breakpoint in the preceding example ).

Example:

 
  
  responsive-grid demo