css3media responsive layout example analysis-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

css3media responsive layout example analysis

高洛峰

Mar 07, 2017 pm 03:27 PM

Responsive layout can provide a more comfortable interface and better user experience for users on different terminals. With the current popularity of large-screen mobile devices, it is not an exaggeration to describe it as "the general trend". As more and more designers adopt this technology, we are not only seeing a lot of innovation, but also seeing some established patterns. With the development of technology, the characteristics of CSS3 have also been widely used. Many of its new tags are also very easy to use and easy to learn. Just like the responsive layout of CSS3, it is also very powerful. Web pages that were originally only displayed on the PC Now you can make a web page responsive by adding @media. It can be used on PC or mobile and can be really scalable. For example,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小于200px*/   
        @media only screen and (max-width:200px ) {   
            #p{   
                background: red;   
            }   
        }   
/*    大于300px*/   
        @media only screen and (min-width:300px ) {   
            #p{   
                background: yellow;   
            }   
        }   

    </style>
    <body>
        <p id="p">小于200px背景变红色大于300px背景为黄色</p>
    </body>
</html>

this The effect of the code segment css3media responsive layout example analysis

@media can be used for single conditions or double conditions. For example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小于200px*/   
        @media (min-width:200px ) and (max-width:500px ) {   
            #p{   
                background: red;   
            }   
        }   
    </style>
    <body>
        <p id="p">200px以上并且500px以下背景变成红色</p>
    </body>
</html>

This code is less than 200px or If the size is larger than 500px, the effect will not be displayed.

A simple @media can realize the responsive page. Isn’t it very easy?

A page I made casually. This is the page effect above 450px css3media responsive layout example analysis

This is the page effect below 450px css3media responsive layout example analysis The general approach is to responsively shrink each p block to below 450px. When the width of each p is 100%

The height is auto. I encountered a small problem when I was writing this web page. When I reached the bottom of the page, the bottom navigation flew away. It did not fall peacefully at the bottom but in the middle. I will share a little knowledge here. That's my final solution. I just need to give the p at the bottom a style clear: both, so that the bottom will be securely fixed to the bottom. In the media, there will also be responsive styles for horizontal and vertical screens, and vertical screens. For @media (orientation:portrait)

vertical screen is @media (orientation:landscape) so that it can adapt to horizontal and vertical screens. Media has many advantages, such as when we create our own resume. If we can use responsive layout, our chances will be much greater. HR may also see your resume on the mobile phone. At this time, opportunities may quietly come to you.

The above article is css3media The responsive layout example is all the content shared by the editor. I hope it can give you a reference, and I also hope you will support the PHP Chinese website.

For more css3media responsive layout example analysis and related articles, please pay attention to the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Making a Chart? Try Using Mobx State Tree to Power the DataApr 15, 2025 am 09:49 AM

Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and

Blocking Third-Party Hands from the Cookie JarApr 15, 2025 am 09:48 AM

Third-party cookies are set on your computer from domains other than the one that you're actually on right now. For example, if I log into css-tricks.com,

Ten-Ton WidgetsApr 15, 2025 am 09:43 AM

At a recent conference talk (sorry, I forget which one), there was a quick example of poor web performance in the form of a third-party widget. The example

Recipes for Performance Testing Single Page Applications in WebPageTestApr 15, 2025 am 09:42 AM

WebPageTest is an online tool and an Open Source project to help developers audit the performance of their websites. As a Web Performance Evangelist at

Stop Animations During Window ResizingApr 15, 2025 am 09:40 AM

Say you have page that has a bunch of transitions and animations on all sorts of elements. Some of them get triggered when the window is resized because they

Weaving One Element Over and Under Another ElementApr 15, 2025 am 09:38 AM

In this post, we’re going to use CSS superpowers to create a visual effect where two elements overlap and weave together. The epiphany for this design came

Are There Random Numbers in CSS?Apr 15, 2025 am 09:37 AM

CSS allows you to create dynamic layouts and interfaces on the web, but as a language, it is static: once a value is set, it cannot be changed. The idea of

Float Element in the Middle of a ParagraphApr 15, 2025 am 09:36 AM

Say you want to have an image (or any other element) visually float left into a paragraph of text. But like... in the middle of the paragraph, not right at

See all articles