1. What is a responsive web page?
A page that can automatically change the layout, size, and so on, depending on the browsing device and the different features.
Advantages: Can be automatically adapted to PC, PAD, phone browser screen
Insufficient: Complex code, need to consider more compatibility, not suitable for very many pages
5.CSS file
1 Body {2Margin0;3 background: #fff;4Font-family:'Simhei';5 }6 7 /*styles that are performed only on the PC screen*/8@media screen and (min-width:992px) {9 . Box {Ten margin:20px; One padding:20px; A background: #fee; - color: #a00; - } the } - /*style performed only on the pad screen*/ -@media screen and (min-width:768px) and (max-width:991px) { - . Box { + margin:10px; - padding:10px; + background: #efe; A color: #0a0; at } - . Box H1 { - Display:none; - } - } - /*Styles performed only on the phone screen*/ in@media screen and (max-width:767px) { - . Box { to margin:0px; + padding:0px; - background: #eef; the color: #00a; * } $}
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <Linkrel= "stylesheet"href= "Css/5.css"/>6 <title></title>7 </Head>8 <Body>9 <Divclass= "box">Ten <H1>Using Media query Technology</H1> One <H1>Different CSS files are executed depending on the width of the screen</H1> A <P><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur officia quasi qui reprehenderit tempore veniam voluptas? Asperiores, culpa dolor dolorum impedit ipsam magnam minima nostrum quibusdam quod reprehenderit rerum, voluptate?</span><span>Accusantium ad atque dicta dolor est et expedita facere fuga illum iusto, Labore laboriosam laudantium molestiae nam, Nemo , Neque Nobis nostrum possimus provident quam quis quod Recusandae repellendus sapiente veniam.</span><span>Architecto, Assumenda at, Blanditiis consectetur consequuntur deserunt dolore earum Eos eum, ex fugit ID laudantium magni Necessitatibus Nemo Nihil nostrum praesentium Provident Recusandae repellendus similique sit ullam vel voluptatem voluptat IBUs.</span> - </P> - </Div> the </Body> - </HTML>
Simple Responsive Layout Presentation
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
