1500字范文 > [HTML_CSS]@media 实现页面自适应布局

[HTML_CSS]@media 实现页面自适应布局

时间：2022-12-20 13:55:32

什么是自适应

一套代码，可以根据屏幕大小，以合理的样式出现在手机，ipad，pc。

总所周知Bootstrap可以实现页面自适应布局，在不添加Bootstrap的情况下，使用@media 也可以实现页面的自适应布局。

怎么使用@media语法

根据不同宽度，选择不同的样式，screen是告知设备在打印页面时使用衬线字体

大于1000px

@media screen and (min-width:100px){}

小于1000px大于500px

@media screen and (min-width:500px) and (max-width:1000px){}

小于500px

@media screen and (max-width:960px){}

竖屏

@media screen and (orientation: portrait) and (max-width: 1000px){}

横屏

@media screen and (orientation: landscape) and (max-width: 1000px){}

width

浏览器可视宽度

device-width

设备屏幕的宽度

补充

display: none

隐藏页面元素display: inline-block

显示为内联块元素块级元素(block)：总是独占一行

div/h1/h1/h3/h4/hr/ol/ul/li…内联元素(inline)：和相邻的内联元素在同一行

b/img/input/label/select/span…

示意图

代码

安装VSCode，这个官网有

安装live-server 插件，可以时时监控页面变化

输入！生成html模板，viewport 是网页默认宽高，下面代码指默认页面宽度为屏幕宽度。这个代码是为自适应做准备

<meta name="viewport" content="width=device-width, initial-scale=1.0">

不能使用px，页面样式会根据页面变化，最好用 % | em | vh

Html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"><link rel="stylesheet" href="css/5.css"><title>media</title></head><body><div class="box one">max-width: 500px red</div><div class="box two">min-width: 500px& max-width: 1000px yellow</div><div class="box three">min-width: 1000px green</div><div class="box iphone">iPhone: 375px grey</div><p class="view"><strong>Your current viewing area is:</strong><span class="lt500">lt500</span><span class="bt500-1000">between 500 - 1000px</span><span class="gt1000">gt1000</span></p></body></html>

Css

.box {border: solid 1px black;margin: 50px;padding: 10px 10px;}span {display: none;}@media screen and (max-width: 500px) {.one {background: red;}.lt500 {display: inline-block;}}@media screen and (min-width: 500px) and (max-width: 1000px) {.two {background: yellow;}.bt500-1000 {display: inline-block;}}@media screen and (min-width: 1000px) {.three {background: green;}.gt1000 {display: inline-block;}}/* max device width */@media screen and (max-device-width: 480px) {.iphone {background: #ccc;}}