我如何根据屏幕尺寸放大或缩小网站

Question

所以我创建了一个网站，其中包含多个文本框等图像，一些用户百分比和一些使用像素，我的意思是他们现在使用它在特定位置。 因此，如果您将笔记本电脑连接到电视并放置网站，它会自动完美地扩大规模，这只会导致事情有点模糊，但一切都已到位。 我想知道如何为我的网站添加一个功能，它可以选择页面中的所有内容并根据屏幕尺寸缩小或扩大它，我不在乎缩小或扩大后它是否变得模糊。 或者，如果有人对我如何使所有内容适合页面有任何其他想法，无论屏幕大小如何，这都会非常有帮助。

Answer 1

首先，有多种方法可以让网站响应，最简单的方法是媒体查询：

@media only screen and (max-width: 600px) {
  body {
    background: #fff;
  }
}
@media only screen and (min-width: 601px) {
  body {
    background: #ccc;
  }
}

这也可以应用于不同的样式表：

    <link rel="stylesheet" type="text/css" href="/styles/gardener_main.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="/styles/additional.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="/styles/gardener_800.css" media="screen and (min-width: 800px)"/>
    <link rel="stylesheet" type="text/css" href="/styles/gardener_799.css" media="screen and (max-width: 799px)"/>

他们基本上是在告诉设备要使用哪种样式来显示尺寸。

首先，您可以通过以下方式工作： https ://www.w3schools.com/css/css_rwd_mediaqueries.asp

更好地了解媒体查询本身。

但！ 大多数人往往会忘记你还需要调整你的html：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

根据您想要支持的设备数量和旧设备数量，您还可以添加一个基本上替换所有内容的开关：

<?php

    $mobrowser = '0'; 
    if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', 
    strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobrowser++;
    }if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or 
    ((isset($_SERVER['HTTP_X_WAP_PROFILE']) 
    or isset($_SERVER['HTTP_PROFILE'])))) {$mobile_browser++;}
    $mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
    $mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda ','xda-');
    
    if (in_array($mobile_ua,$mobile_agents)) {$mobrowser++;}
    if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {$mobrowser++;}
    if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {$mobrowser = 0;}
    if ($mobrowser > 0) {
    echo '
    HTML old mobile devices etc
    ';
    }
    else {
    echo '
    HTML desktop
    ';
    }?>

有了这个巨大的东西，你可以抓住移动代理，但只有当你真的想支持历史设备时，这样的东西才有意义。

Answer 2

也许您可以尝试添加一些 CSS，例如 @media screen 和 (min-width: 1240px) {...}

Answer 3

响应式

这是您可以测试它的方法。 只需在浏览器中打开它，右键单击检查元素或 f12。 我用红色标记了你可以看到的地方，它在不同尺寸上的外观。