如何动态调整标题的徽标？

Question

我真的对html和css一无所知，但我有一个网页，我可以在其中更改页面大小以适应屏幕分辨率的大小。我更喜欢页面大小会根据浏览器的大小进行调整，但到目前为止我可以使用它。

在页面中，我有一个标题作为徽标，但我无法调整大小以适应页面大小，我想知道是否可能。

我的css文件的代码是：

/* Resets
--------------------------------------------------------------------------------*/

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
    margin: 0;
    padding: 0;
}

a img {
    border: 0;
    /*NOTA: si se utiliza el width en la imagen se modifica el tamaño de la imagen del logo.
    Se puede utilizar tanto en porcentaje como en pxels, pero en porcentaje no parece que se modifique,
    solo si se indica en pixels.
    ESTO ES UN AÑADIDO propio, no es original de la web.*/
    width: 100%;
    /*@NOTA: eh height modica todas las imágenes del la página.*/
    //height: 100px;
}

a {
    color: #6ca9d5;
    text-decoration: none;
}

a:hover {
    color: #90cbf5;
}

/* General Styling and Structure
--------------------------------------------------------------------------------*/

body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    color: #868686;
    /*NOTA: el margen es el que se deja entre el borde del navegador y el contenido. Por defecto es 0.
    El padding es parecido y por defecto también es 0. Aunque se cambia y no hace nada.
    Se tiene que poner 10px por ejemplo, px para indicar pixels. Si se pone 10% entonces es en porcentaje.*/
    margin: 1%;
    padding: 0;
    background: #fafafa;
}

h2 {
    font-size: 1.7em;
    margin: 0;
    padding: .3em 0;
    line-height: 1.2;
    font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif;
}

#content h2 {
    color: #90cbf5;
}

p {
    font-size: 1em;
    line-height: 1.5;
    margin: 0;
    padding: .5em 0;
}

#content p {
    color: #868686;
}

#content abbr {
    border-bottom: 1px dotted #8f8f8f;
}


#header-wrap,
#main-wrap {
    background: #fff;
    /*@PRUEBA el original es el mind-width:1200px
    width: 100%;
    //min-width: 1200px;
    vertical-align: baseline;
}


#page {
    /*@NOTA: esto no deja margen a los lados, si no se indica width, pega todo al máximo de la resolución de pantalla.
    Por defecto es 0 auto*/
    margin: 0 auto;
    /*@MODIFICACION: este es el valor original. Si se amplia a 1300px por ejemplo ocupa todo el ancho
    //de pantalla. Si no se pone nada, se pega todo a la pantalla sin márgenes.
    Se ajusta al tamaño de pantalla, no al tamaño de la ventana del navegador.*/
    /*width: 900px*/
    /*@NOTA: si se indica un ancho automático se ajusta también al tamaño de pantalla.
    Se ajusta al tamaño de pantalla, no al tamaño de la ventana del navegador.*/
    width: 100%;
}


#header {
    padding: 0;
    margin: 0;
    /*@PRUEBA*/
    width: 2000px;
}

.wsite-logo,
.wsite-logo a {
    color: #90cbf5;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.wsite-logo,
.wsite-logo a:hover {
    color: #90cbf5;
}

#logo,
#logo a {
    font-size: 36px;
    color: #90cbf5;
    font-weight: normal;
    padding: 0;
    font-family: "Actor", Arial, Helvetica, sans-serif;
}

#header-right a {
    color: #6ca9d5;
}

#header-right a:hover {
    color: #90cbf5;
}

/* Header Area
-------------------------------------------------------------*/

#header {
    /*El ancho parece que no se ajusta a nada, si se pone muy pequeño el logo se sigue viendo
    completo*/
    width: 100%;
    /*@NOTA: esto modifica el alto del encabezado, que es dond está el logo.*/
    height: 100px;
}

#header,
#header table {
    border-collapse: collapse;
    border-spacing: 0;
}

#header td {
    vertical-align: middle;
    /*@NOTA: la alineación modifica la posición de la imagen de la cabecera de GTS.*/
    text-align: left;
}


#logo {
    /*@NOTA: el padding controla la separación desde la parte superior hasta la imagen del lgo de GTS.
    El primer número indica el padding desde la parte superior y el segundo desde la izquierda.
    El padding empieza a contar desde el margen de la página, es por tanto una adición al margen.
    Se pueden indicar también porcentajes.*/
    padding: 0 0;
    /*@NOTA: la opaciodad se indica con porcetanje. 1 es 100 de opacidad. Se Cambia la opacidad de la imagen
    del logo de GTS de la cabecera.
    ESTO ES AÑADIDO, no es original de la web.*/
    //Opacity: 0.2;
}


#header-right {
    padding: 0 0 0 10px;
}

#header-right table {
    width: 1px;
}

#header-right table,
#header-right .search,
#header-right .wsite-search {
    clear: right;
    float: right;
}

#header-right td {
    padding: 0;
}




/* TOP RIGHT: Phone Number
--------------------------------------------------------------------------------*/
#header-right .phone-number .wsite-text {
    color: #868686;
    font-size: 12px;
    font-weight: normal;
    font-family: Tahoma, Geneva, sans-serif;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    margin: 5px 0 5px 15px;
}

/* TOP RIGHT: Social Links
--------------------------------------------------------------------------------*/

#header-right .wsite-social {
    vertical-align: middle;
    margin: 5px 0 0 10px;
}

#header-right .wsite-social-item {
    width: 12px;
    height: 12px;
    margin: 0 0 0 12px;
}

#header-right .wsite-social-rss {
    background: url(rss-h.png) no-repeat;
}

#header-right .wsite-social-linkedin {
    background: url(linkedin-h.png) no-repeat;
}

#header-right .wsite-social-facebook {
    background: url(facebook-h.png) no-repeat;
}

#header-right .wsite-social-twitter {
    background: url(twitter-h.png) no-repeat;
}

#header-right .wsite-social-mail {
    background: url(mail-h.png) no-repeat;
}

/* TOP RIGHT: Search Box
--------------------------------------------------------------------------------*/

#header-right .search {
}

#header-right .wsite-search {
    margin: 5px 0 5px 15px;
    vertical-align: middle;
}

#header-right .wsite-search-input {
    width: 137px;
    height: 13px;
    border: none;
    padding: 8px 8px 6px 8px !important;
    font-family: Arial, Helvetica, sans-serif;
    color: #848484;
    font-size: 12px;
    background: url(input-bg.png) no-repeat;
    vertical-align: middle;
    display: inline-block;
}

#header-right .wsite-search-button {
    position: relative;
    width: 30px;
    height: 27px;
    color: #010101;
    font-size: 12px;
    border: none;
    margin: 0;
    padding: 0;
    background: url(submit-bg-blue.png) no-repeat;
    vertical-align: middle;
    display: inline-block;
}

/* Navigation
--------------------------------------------------------------------------------*/

#topnav {
    clear: both;
    margin: 0;
    overflow: hidden;
}

#topnav ul {
    list-style: none;
    float: left;
}

#topnav ul li {
    list-style: none;
    float: left;
    padding: 0 2px 0 0;
}

#topnav a {
    float: left;
    display: block;
    color: #545454;
    text-decoration: none;
    font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif;
    padding: 10px 15px 11px;
    font-size: 13px;
    border: 0;
    outline: 0;
    margin: 0;
    list-style-type: none;
    text-transform: uppercase;
    line-height: 1;
}

#topnav li#active a,
#topnav a:hover {
    color: #545454;
    background: #e3f3ff;
    border: 0;
}

/****************************** flyout menus ******************************/

#wsite-menus .wsite-menu li a {
    font-family: Tahoma, Geneva, sans-serif;
    padding: 9px;
    color: #545454;
    background: #e3f3ff;
    border: 0;
    border-bottom: 1px solid #b6d2e6;
}

#wsite-menus .wsite-menu li a:hover {
    color: #545454;
    background: #fdfeff;
}

/* main  */

#main {
}

#content {
    min-height: 400px;
    /*@NOTA: el padding modifica la separación entre las banderas con los idiomas el menú.*/
    padding: 30px 0;
}

#container {
    /*width: 920px;*/
    width: 1200px;
    margin: 0 auto;
}

/*
#banner-wrap {
    border-bottom: 1px solid #d4d4d4;
    border-top: 1px solid #d4d4d4;
    background: #f6f6f6;
    min-width: 920px;
}
*/

/*
#banner-bot {
    background: url(banner-bot.png) left bottom no-repeat;
    padding-bottom: 14px;
}



#banner-top {
    background: url(banner-top.png) no-repeat;
    padding-top: 14px;
}



#banner-mid {
    background: url(banner-mid.png) repeat-y;
    padding: 0 10px;
    overflow: hidden;
}
*/

/*
#banner-outer {
    border: 6px solid #fff;
}
*/

/*
#banner {
    background: url(banner-top.png) no-repeat;
    padding-top: 14px;
    position: relative;
}
*/

/* PAGE TYPE: banner-tall
--------------------------------------------------------------------------------*/
/*
.tall-header-page .wsite-header {
    width: 888px;
    height: 258px;
    background: url(banner-tall.jpg) no-repeat;
}
*/

/* PAGE TYPE: banner-short
--------------------------------------------------------------------------------*/
/*
.short-header-page .wsite-header {
    width: 888px;
    height: 168px;
    background: url(banner-short.jpg) no-repeat;
}
*/

.no-header-page #banner-wrap {
    padding: 8px 0;
    border-bottom: 1px solid #d4d4d4;
    border-top: 1px solid #d4d4d4;
}

/*
.no-header-page #banner-bot {
    display: none;
}
*/

/* PAGE TYPE: banner-landing
--------------------------------------------------------------------------------*/

.landing-page #banner {
    border: none;
    background: none;
    padding: 0;
}

.landing-page #banner-detail {
    background: #66c9c1;
}

#bannerleft {
    float: left;
    width: 504px;
    padding: 0;
    position: relative;
}

/*
#banner-b {
    background: url(landing-bnr-mid-03.png) left bottom no-repeat;
    padding-bottom: 14px;
}
*/

/*
#banner-t {
    background: url(landing-bnr-top.png) no-repeat;
    padding-top: 14px;
}
*/

/*
#banner-m {
    background: url(landing-bnr-mid.png) repeat-y;
    padding: 0 10px;
    overflow: hidden;
}
*/

#banner-inner {
    border: 6px solid #fff;
}

.landing-page .wsite-header {
    /*width: 472px;*/
    width: 1200px;
    height: 318px;
    background: url(banner-landing.jpg) no-repeat;
}

#bannerright {
    float: right;
    width: 366px;
    padding: 65px 25px 0 25px;
}

#bannerright h2 {
    color: #90cbf5;
    font-size: 32px;
    padding: 0 0 12px 0;
}

#bannerright p {
    color: #868686;
    font-size: 1.1em;
    padding-bottom: 25px;
    margin: 0;
}

#bannerright .wsite-button {
    margin: 0;
}

/* PAGE TYPE: splash
--------------------------------------------------------------------------------*/

.splash-page #header {
    width: 532px;
}

.splash-page #banner {
    width: 527px;
    height: 161px;
    padding: 6px 4px 4px 6px;
    background: url(banner-splash-bg.png) no-repeat;
}

.splash-page .wsite-header {
    width: 515px;
    height: 149px;
    background: url(banner-splash.jpg) no-repeat;
}

.splash-page #content-container {
    width: 528px;
}

.splash-page #content {
    width: 528px;
}

.splash-page #footer {
    width: 524px;
}

/* Footer
--------------------------------------------------------------------------------*/

#footer-wrap {
    border-top: 1px solid #dedede;
    background: #fafafa;
    min-width: 920px;
}

#footer {
    padding: 40px 0 45px;
    font-size: 12px;
    color: #666;
    font-family: Arial, sans-serif;
    text-align: right;
}

#footer p {
    color: #666;
}

#footer a {
    color: #919191;
}

#footer a:hover {
    color: #6ca9d5;
}

#footer h2 {
    font-size: 16px;
    margin: 0 0 2px;
    padding: .3em 0;
    line-height: 1.5;
    color: #414141;
    font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif;
    border-bottom:1px solid #ddd;
}

#footer span {
    vertical-align: middle;
}

#footer .wsite-social {
    vertical-align: middle;
}

#footer .wsite-social-item {
    width: 12px;
    height: 12px;
    margin-right:6px;
}

#footer .wsite-social-rss {
    background: url(rss.png) no-repeat;
}

#footer .wsite-social-linkedin {
    background: url(linkedin.png) no-repeat;
}

#footer .wsite-social-facebook {
    background: url(facebook.png) no-repeat;
}

#footer .wsite-social-twitter {
    background: url(twitter.png) no-repeat;
}

#footer .wsite-social-mail {
    background: url(mail-h.png) no-repeat;
}

.wsite-footer {  /* make sure enough space between element footer and attribution */
    margin-bottom: 15px;
}

/* Form Customization
--------------------------------------------------------------------------------*/

.wsite-form-label {
    display: inline-block;
    color: #868686;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1em;
    padding: 12px 0 5px 0;
}

.form-radio-container {
    color: #868686;
    font-size: 14px;
    font-family: Tahoma, Geneva, sans-serif;
}

.wsite-form-input {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    color: #868686;
    background: #fff;
    border: 1px solid #dcdcdc;
    padding: 8px 4px 5px !important;
    width: 300px;
    line-height: 1;  /* background:#fff url(field.png) repeat-x;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        */
}

.form-select {
    color: #868686;
    border: 1px solid #dcdcdc;
    font-size: 13px;
    background: #fff;
    font-family: Tahoma, Geneva, sans-serif;
    padding: 3px 4px;
    width: 320px;
    height: 27px;
    line-height: 27px;  /*
            background:url#fff (field.png);
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        */
}

/* Footer Form Customization
--------------------------------------------------------------------------------*/

.wsite-form-container {
    margin-top:0px !important;
    text-align:left;
}

.wsite-footer .wsite-form-label {
    font-size: 1em;
    padding: 5px 0 2px 0;
}

.wsite-footer .wsite-form-field {
    width:300px !important;
}

.wsite-footer .form-radio-container {
    font-size:1em;
}

.wsite-footer .wsite-form-input {
    font-size: 1em;
    width: 100% !important;
}

.wsite-footer .form-select {
    width: 100%;
}

/* Buttons
--------------------------------------------------------------------------------*/

/*
  Buttons are styled with background image sprites. There are 4 unique image files:
   - small & normal-colored  (button_small_grey.png)
   - large & normal-colored  (button_large_grey.png)
   - small & highlight-colored  (button_small_orange.png)
   - large & highlight-colored  (button_large_orange.png)

  Each of these 4 types of buttons must define a :hover state (when user's mouse is over)
  as well as an :active state (when the user presses down).

  Look at the CSS (especially the inner .wsite-button-inner wrapper), as well as the
  image files to understand how the liquid-width nature of these buttons work.
 */

/* small */

.wsite-button {
    color: #333 !important;
    font-family: Arial, Helvetica, sans-serif;
    height: 34px;
    display: inline-block;
    font-size: 12px;
    border: none;
    font-weight: normal;
    font-size: 13px;
    text-decoration: none;
    padding: 0 15px 0 0;
    background: url(button.png) no-repeat 100% -105px;
}

.wsite-button:hover {
    background-position: 100% -140px;
}

.wsite-button:active {
    background-position: 100% -175px;
}

.wsite-button-inner {
    height: 34px;
    line-height: 34px;
    display: block;
    font-size: 14px;
    font-weight: normal;
    border: none;
    text-decoration: none;
    padding: 0 10px 0 25px;
    background: url(button.png) no-repeat 0 0;
}

.wsite-button:hover .wsite-button-inner {
    background-position: 0 -35px;
}

.wsite-button:active .wsite-button-inner {
    background-position: 0 -70px;
}

/* large */

.wsite-button-large {
    height: 41px;
    background: url(button_large.png) no-repeat 100% -126px;
    padding: 0 15px 0 0;
}

.wsite-button-large:hover {
    background-position: 100% -168px;
}

.wsite-button-large:active {
    background-position: 100% -210px;
}

.wsite-button-large .wsite-button-inner {
    height: 41px;
    line-height: 41px;
    padding: 0 10px 0 25px;
    background: url(button_large.png) no-repeat 0 0;
}

.wsite-button-large:hover .wsite-button-inner {
    background-position: 0 -42px;
}

.wsite-button-large:active .wsite-button-inner {
    background-position: 0 -84px;
}

/* highlight */

/*
Making the highlighted versions of the buttons is easy because we just need
to switch out the background images. This works because the different button
states (normal, :hover, :active) have their sprite coordinates in the same places.
*/

.wsite-button-large.wsite-button-highlight {
    background-image: url(button_large_highlight_blue.png);
}

.wsite-button-large.wsite-button-highlight .wsite-button-inner {
    background-image: url(button_large_highlight_blue.png);
}

.wsite-button-highlight {
    color: #fff !important;
    background-image: url(button_highlight_blue.png);
}

.wsite-button-highlight .wsite-button-inner {
    background-image: url(button_highlight_blue.png);
}

我的HTML代码是这样的：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body class=' tall-header-page  wsite-theme-dark'>
<div id="header-wrap">
    <div id="page">
        <div id="header-container">
            <table id="header">
                <tr>
                    <td id="logo">{logo}</td>
                    <td id="header-right">
                        <table>
                            <tr>
                                <td class="phone-number">{phone:text}</td>
                                <td class="social">{social}</td>
                            </tr>
                        </table>
                        <div class="search">{search}</div>
                    </td>
                </tr>
            </table>
            <div id="topnav">
                {menu}
                <div style="clear:both"></div>
            </div>
        </div>
    </div>
</div>
<div id="banner-wrap">
    <div id="container">
        <div id="banner-bot">
            <div id="banner">
                <div id="banner-mid">
                    <div id="banner-outer">
                        <div class="wsite-header"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="main-wrap">
    <div id="page">
        <div id="main">
            <div id="content">{content}</div>
        </div>
    </div>
</div>
<div id="footer-wrap">
    <div id="page">
        <div id="footer">{footer}</div>
    </div>
</div>
</body>
</html>

我想知道如何更改徽标的宽度，标题，以适应页面的宽度。

如果可能，如何使页面的宽度适合浏览器的宽度，那么当用户更改窗口浏览器的大小时，请将内容与浏览器大小相匹配。

感谢。

Answer 1

由于浏览器的分辨率/大小取决于客户端，因此您可以在客户端解决此问题。

我建议调查JavaScript，因为它有这些方便的功能（以及更多）：

// Get the page width
windowWidth = document.body.offsetWidth;

// Get the page height
windowHeight = document.body.offsetHeight;