我如何根据屏幕尺寸扩展网站或缩小规模

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)"/>

他们基本上告诉设备用于显示尺寸的样式。

首先，您可以努力：
//www.www.w3schools.coms.coms.comsss/csssss/cssss_rwd_mediaquelies.mediaqueries.asp

https: 更好地理解媒体查询本身。

但！大多数人往往会忘记您还需要调整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
    ';
    }?>

使用此ENMUS，您可以抓住移动设备，
但是，只有当您真的想支持时，这些事情才会很有趣
历史设备。

Answer 2

也许您可以尝试添加一些CSS
@Media屏幕和（最小宽度：1240px）{...}

Answer 3

响应能力

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