Responsive and responsive Layout
Frontend-responsive
1. What is responsive design?
Responsive design is to perform operations and layout based on user operations and device environments during website development, so that the website can intelligently adjust the platform, screen size, and screen orientation of different systems, make corresponding la s, such as on PCs, iPhones, Android, and ipad, to achieve smooth browsing on smart mobile phones, tablets, and other smart mobile terminals to prevent page deformation, automatic page resolution, image size, and script functions can be automatically switched to adapt to different devices, and website data can be synchronously updated on any browser terminal, it can provide more comfortable interfaces and better user experience for users of different terminals.
2. What are the advantages of a responsive approach?
Responsive design features high flexibility in the face of different resolution devices. It can quickly solve the problem of multi-device display adaptation. It can be compatible with multiple smart mobile browsing terminals and automatically adapt to its screen size and uniform style, the website recognition is increased, and the background and database used by the responsive website are unified, that is, after the website content is edited on the PC end, mobile phone, PAD, and other smart mobile browsing terminals can synchronously display modified content, and the management of website data can be more timely and convenient. Improve the technical quality of the website, provide users with a friendly Web interface, better explore potential customer groups, and bring more access traffic to the website.
3. Basic response
Flex layout (1. Set the parent element to an elastic box and display: box. 2. subelement partitioning Area box-flex: value)
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> response </title>
</Head>
<Style>
/* Flex Layout */
*{
Padding: 0;
Margin: 0;
}
# Row {
/* Auto-adaptive box */
Display:-webkit-box;
Height: 300px;
}
# Left {
Width: 400px;
Height: 100px;
Background: blue;
}
# Center {
Height: 200px;
Line-height: 200px;
Background: green;
Width: 200px;
/* Divide the region */
-Webkit-box-flex: 2;
}
# Right {
Height: 300px;
Line-height: 300px;
Background: red;
Width: 100px;
-Webkit-box-flex: 3;
}
</Style>
<Body>
<! -- Flew layout -->
<Div id = "row">
<Div id = "left"> I LOVE YOU </div>/* fixed width and height */
<Div id = "center"> I LOVE YOU </div>/* the compiler searches for elements with the box-flex attribute and shares the remaining Size Based on the value */
<Div id = "right"> I love </div> /**/
</Div>
<Div id = "row1"> </div>
</Body>
</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
