手机/小屏幕的响应式 CSS

Posted 2023-03-06

【中文标题】手机/小屏幕的响应式 CSS

【英文标题】：Responsive CSS for phones/small screens

【发布时间】：2012-08-31 16:27:14

【问题描述】：

我正在尝试设置一个基本的响应式 wordpress 主题。首先，我从 wordpress.org 获取了工具箱主题并添加了 twitter bootstrap responsive css/js。

我添加了一些基本的测试样式，只是为了减少小屏幕上的填充并更改颜色以表明它可以正常工作。出于某种原因，横向手机的样式不起作用。

您可以查看我的网站here。

我的响应式 CSS 代码：

/* Large desktop */
@media (min-width: 1200px)  
    body    
        padding-left: 50px;
        padding-right: 50px;
        color: green;
    


/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1199px)  
    body    
        padding-left: 30px;
        padding-right: 30px;
        color: purple;
    


/* Landscape phone to portrait tablet */
@media (max-width: 767px)  
    body    
        padding-left: 20px;
        padding-right: 20px;
        color: blue;
    


/* Landscape phones and down */
@media (max-width: 480px)  
    body    
        padding-left: 5px;
        padding-right: 5px;
        color: red;
    

【问题讨论】：

不仅横屏手机，也不支持小平板横屏 (800x600)、平板竖屏 (768x1024)、平板横屏 (1024x768)

@refhat 好吧，这只是一个开始（尺寸实际上来自响应式引导指南）。我没有你提到的尺寸规则，但我有一个规则应该涵盖手机（

我提到的规则，你不必担心它们，只要确保这些跨度根据 twitter 引导程序增加到 12。就您的规则而言，它不涵盖/适用于/在 iphone（481px）上。这意味着您没有正确设置媒体查询断点。

@refhat 是的，布局将加起来为 12（我认为现在可以）。此外，我只是通过更改桌面浏览器窗口的大小来进行测试。当我将宽度拖得更小时，它会在前 3 种颜色之间循环，但不会在最后一种颜色中循环。还检查了我的安卓手机以确保。

【参考方案1】：

您似乎没有正确设置视口的元标记：

应该是这样的：

<meta name="viewport" content="width=device-width; maximum-scale=1; minimum-scale=1;" />