时间戳

首页 > 解决方案 > 如何使网站在移动视图中响应

css - 如何使网站在移动视图中响应

问题描述

我需要将网站设置为移动响应格式。在检查 F12 时，以下代码与 ipad 组兼容。下面是我的css代码。#Result: 将这个css构建成一个对移动/ipad友好的css。#这里的Divs是由jquery动态生成的。我只需要这张图片

在此处输入图像描述

但变成这样：

在此处输入图像描述

这是生成的div

在此处输入图像描述

.SCSS 文件

#Main{
 width: 960px;
  margin:0px auto;
 overflow:hidden;

       }.Table1 
    {
    background-color: paleturquoise;
    text-align: center;
    margin-top: 9em !important;
    width: 40%;
    color: red;
    font-weight: bold;
    box-shadow: inset 0 0 10px #000000;
    text-shadow: 0px 0px 0px #333;
    top: .5%;
    font-size:20px !important;
    }
    .width50 {
        width:50% !important;
    }

@media screen and (min-width:480px) {
    #Main {
        width: 50%;
    }

    .Table1 {
        width: 40%;
    }
 .Table2row1 {
        width: auto;
    }
    body {
        margin: 0;
        height: 100%;
    }
}

标签： cssbootstrap-4

解决方案

推荐阅读