Analyse d'un exemple de mise en page réactive CSS3media-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Analyse d'un exemple de mise en page réactive CSS3media

高洛峰

Mar 07, 2017 pm 03:27 PM

La mise en page réactive peut offrir une interface plus confortable et une meilleure expérience utilisateur aux utilisateurs de différents terminaux. Avec la popularité actuelle des appareils mobiles à grand écran, il n'est pas exagéré de la décrire comme « la tendance générale ». Alors que de plus en plus de designers adoptent cette technologie, nous constatons non seulement de nombreuses innovations, mais également des modèles établis. Avec le développement de la technologie, les caractéristiques de CSS3 ont également été largement utilisées. Beaucoup de ses nouvelles balises sont également très faciles à utiliser et à apprendre. Tout comme la mise en page réactive de CSS3, elle est également très avancée. à l'origine affiché uniquement sur les PC, vous pouvez désormais rendre une page Web réactive en ajoutant @media. Elle peut être utilisée sur PC ou mobile et elle peut être vraiment évolutive. Par exemple,

<!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>

L'effet de ce code Analyse dun exemple de mise en page réactive CSS3media

@media peut être utilisé pour des conditions simples ou des conditions doubles. Par exemple :

<!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>

. Ce paragraphe Si le code est inférieur à 200px ou supérieur à 500px, l'effet ne sera pas affiché

Un simple @media peut réaliser une page responsive n'est-ce pas très simple

A. la page que j'ai créée avec désinvolture est supérieure à 450 px. Effet de page Analyse dun exemple de mise en page réactive CSS3media

Il s'agit de l'effet de page en dessous de 450 px Analyse dun exemple de mise en page réactive CSS3media L'approche générale consiste à réduire de manière réactive chaque p en dessous de 450 px lorsque la largeur de chaque p est de 100. %

La hauteur est auto. J'ai rencontré un petit problème lorsque j'écrivais cette page web. Lorsque j'ai atteint le bas de la page, la navigation du bas s'est envolée. Elle n'est pas tombée tranquillement en bas mais en. au milieu. Je vais partager un petit problème ici. Un petit point de connaissance est ma solution finale. Il me suffit de donner au p en bas un style clair : les deux, pour que le fond soit solidement fixé au fond, et là. sera des réponses d'écran horizontales et verticales au format média, l'écran vertical est @media (orientation:portrait)

L'écran vertical est @media (orientation:paysage) afin qu'il puisse s'adapter à la fois à l'horizontale et à la verticale. Les écrans verticaux présentent de nombreux avantages. Par exemple, lorsque nous créons notre propre CV, nous pouvons utiliser une mise en page réactive lors de la rédaction de notre CV, nos chances seront donc beaucoup plus grandes de voir votre CV sur le téléphone mobile. venez tranquillement

L'exemple de mise en page réactive CSS3media ci-dessus est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez le site Web PHP chinois.

Pour plus d'analyses d'exemples de mise en page réactive CSS3media et d'articles connexes, veuillez faire attention au site Web PHP chinois !

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

Tant de liens de couleursApr 13, 2025 am 11:36 AM

Il y a eu une série d'outils, d'articles et de ressources sur la couleur récemment. Veuillez me permettre de fermer quelques onglets en les rassemblant ici pour votre plaisir.

Comment fonctionnent les marges automnales dans FlexboxApr 13, 2025 am 11:35 AM

Robin a déjà couvert cela, mais j'ai entendu une certaine confusion au cours des dernières semaines et j'ai vu une autre personne prendre un coup de poing pour l'expliquer, et je voulais

Les soulignements arc-en-ciel en mouvementApr 13, 2025 am 11:27 AM

J'adore la conception du site Sandwich. Parmi les nombreuses caractéristiques belles figurent ces titres avec des soulignements arc-en-ciel qui se déplacent lorsque vous faites défiler. Ce n'est pas

Nouvel An, nouvel emploi? Laisse faire un curriculum vitae à propulsion de grille!Apr 13, 2025 am 11:26 AM

De nombreux conceptions de CV populaires tirent le meilleur parti de l'espace de page disponible en disant des sections en forme de grille. Utilisons la grille CSS pour créer une disposition qui

Une façon de sortir les utilisateurs de l'habitude de recharger tropApr 13, 2025 am 11:25 AM

Les recharges de page sont une chose. Parfois, nous actualisons une page lorsque nous pensons que cela ne répond pas, ou croyons que un nouveau contenu est disponible. Parfois, nous sommes juste en colère contre

Conception axée sur le domaine avec réactApr 13, 2025 am 11:22 AM

Il y a très peu de conseils sur la façon d'organiser des applications frontales dans le monde de la réaction. (Déplacez simplement les fichiers jusqu'à ce qu'il «se sent bien», LOL). La vérité

Détecter les utilisateurs inactifsApr 13, 2025 am 11:08 AM

La plupart du temps, vous ne vous souciez pas vraiment de savoir si un utilisateur est activement engagé ou temporairement inactif sur votre application. Inactif, signifiant, peut-être qu'ils

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo a toujours été génial avec les intégrations. Ils ont des intégrations avec des applications spécifiques, comme Campaign Monitor, MailChimp et Typekit, mais ils aussi

See all articles