HTML实现手机端适配

2024-07-14 09:34| 来源: 网络整理| 查看: 265

适配

有些网页在电脑浏览器上看还行，可是放在手机上看就觉得不好看。从UI设计的角度来讲，网页的UI和移动端的UI设计理念是不同的，所以网页要有网页的UI，移动端要有移动端的UI。我们要怎么做呢？

示例代码 /* 小屏幕手机端 */ @media (min-width: 0px) and (max-width:768px) { .div1{ width: 100px; height: 100px; background-color: red; } } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: 768px) and (max-width:992px){ .div1{ width: 300px; height: 300px; background-color: blue; } } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: 992px) { .div1{ width: 500px; height: 500px; background-color: aqua; } }

大家把这个代码复制到你的HTML编辑器上，在浏览器上运行后。以拖拽的方式，不断缩小浏览器的宽度。看看会发生什么？

当浏览器窗口宽度很大时候：显示500×500的青蓝色块

当浏览器窗口中等时候：显示300×300的蓝色色块

当浏览器窗口非常小的时候：显示100×100的红色色块

这种布局叫做响应式布局，会根据窗口宽度，自动变化样式

响应式布局

媒体查询

媒体查询是css的技巧之一，它是用@media来实现的

/* 小屏幕手机端 */ @media (min-width: 0px) and (max-width:768px) { .div1{ width: 100px; height: 100px; background-color: red; } } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: 768px) and (max-width:992px){ .div1{ width: 300px; height: 300px; background-color: blue; } } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: 992px) { .div1{ width: 500px; height: 500px; background-color: aqua; } }

虽然我写了3个div样式，但是css会根据当前的浏览器窗口宽度，自动选择其中的1个作为样式作用与HTML文档中

示例网站

星巴克官网（响应式布局）

缩小浏览器宽度，看看布局的变化

【本文地址】

HTML实现手机端适配

HTML实现手机端适配

今日新闻

推荐新闻