响应式页面的前端制作

最新推荐文章于 2025-08-18 11:15:14 发布

weixin_33907511

最新推荐文章于 2025-08-18 11:15:14 发布

阅读量92

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/JolinChan/p/4368168.html

本文详细介绍了如何在不同尺寸的手机上实现适配，包括使用媒体查询、不同分辨率的对应样式表以及如何根据设备宽度、屏幕方向和像素比进行优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 在<head></head>里加入@media媒体查询

<link rel="stylesheet" media="not all and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3)" href="dist/css/style.min.css">
<link rel="stylesheet" media="(min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3)" href="dist/css/style_iphone6+.min.css">

注：a. device-width是规定设备的尺寸范围

　　b. orientation：portrait是规定只能竖屏查看

　　c. -webkit-min-device-pixel-ratio是规定这个尺寸范围内的分辨率为3，也就是设计图做到前端手机上要全部缩小3倍。

　　附表：