Question

我在codeigniter中有一个网站。我已经制作了一个仅使用html和CSS作为笔记本电脑屏幕的网页。但我要用于所有移动设备。所以我写了针对移动设备的媒体查询。例如，我的移动设备的配置为393 * 786。所以我尝试过的事情

/* media query*/
   /* Media Query for Mobile Devices */ 
   @media (max-width: 480px) { 
    html, body {
        max-width: 100%;
        overflow-x: hidden;
        
    }
       .heading-second
       {
           display: none;
           overflow-x: hidden;
           overflow-y: scroll; 
           
       }
.........

这是我在<head>下方的顶行

<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no">

我遇到了什么错误

该网页看起来因 363 * 778 而有所不同。 我必须为每个设备制作？我认为不可能吗？那我该如何为每种设备写信呢？

Answer 1

不可能满足所有可能的范围，我们尝试使用自然的断点。在Web屏幕，i-pad，i-pad pro和移动设备（定向风景和定向肖像）上进行测试。

为手机尝试@media （最大宽度：480像素）。

此外，您可以依靠流畅的设计来覆盖大多数设备。有关fluid layout的视频可能会有所帮助。

Answer 2

首先创建第一个移动网站。完成后，您可以增加屏幕并进行更改和调整。另外，为了使自己更轻松，可以使用css网格。 https://css-tricks.com/snippets/css/complete-guide-grid/

为什么Media Query在设备上不起作用？

2 个答案: