Question

我的网站位于http://www.elgami.com/

我正在使用Twitter Bootstrap进行造型。桌面上的一切都运行正常，但我的样式不会在移动浏览器上显示，当然，除非我硬编码。可能出现什么问题？

我的标题显示在下方：

我的css文件位于我的public_html根目录中的“css”文件夹中。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hypercycle™ - Personalize Your World.</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width; initial-scale=1.0;">

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/blog.css" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway:400,800,900">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:100,200,400,600">

  <link rel='stylesheet' href='typicons.font-master/src/font/typicons.min.css' />

</head>

Answer 1

删除

 @media (min-width: 1200px) {

来自blog.css的第32行。它告诉浏览器只在网站大于1200px时才设置样式。

Answer 2

删除@media标签完全搞乱了布局（但这可能是我网站特有的问题），所以我做了以下几点：

@media (min-width: 0px) {
  .container {
    width: 100%;
  }

Twitter Bootstrap - 样式不会在移动浏览器上显示

2 个答案: