Maison > interface Web > tutoriel HTML > 一个网页在浏览器里不是全屏 在手机端是全屏_html/css_WEB-ITnose

一个网页在浏览器里不是全屏 在手机端是全屏_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:38:31
original
1261 Les gens l'ont consulté

如何使一个网页在浏览器里不是全屏 在手机端是全屏
nbsp;html>













 一个网页在浏览器里不是全屏 在手机端是全屏_html/css_WEB-ITnose





  • 一个网页在浏览器里不是全屏 在手机端是全屏_html/css_WEB-ITnose
    婚姻家庭

  • 一个网页在浏览器里不是全屏 在手机端是全屏_html/css_WEB-ITnose
    财产纠纷

  • 一个网页在浏览器里不是全屏 在手机端是全屏_html/css_WEB-ITnose
    交通事故

  • 一个网页在浏览器里不是全屏 在手机端是全屏_html/css_WEB-ITnose
    医疗纠纷

  • 一个网页在浏览器里不是全屏 在手机端是全屏_html/css_WEB-ITnose
    刑事辩护

  • 一个网页在浏览器里不是全屏 在手机端是全屏_html/css_WEB-ITnose
    劳动人事

  • 一个网页在浏览器里不是全屏 在手机端是全屏_html/css_WEB-ITnose
    公司事务

  • 一个网页在浏览器里不是全屏 在手机端是全屏_html/css_WEB-ITnose
     更多






回复讨论(解决方案)

看看 media query 吧,挺简单的,就是麻烦。你可以参考下:

@media only screen and (max-width: 959px) {    .top-fix .menu-control {position: absolute; top: 13px; right: 18px; display: block; text-align: center; }    .top-fix .menu-control a {display: block; border: none; padding: 0; background-color: transparent; cursor: pointer; width: 21px; height: 20px; color: rgba(0, 0, 0, 0); line-height: 200px; overflow: hidden; background-image: url(../images/menu_control.png); background-repeat: no-repeat; }    .top-fix .menu-control-h a {background-image: url(../images/menu_control_h.png); }    .header {display: none; position: absolute; top: 50px; left: 0; background: #333; padding-top: 12px; }    .menu-menumain {margin: 0; }    .menu-menumain .menumain-item {margin: 0; width: 100%; border-bottom: 1px solid #444; }    .menu-menumain .menumain-item a {text-align: left; display: inline-block; margin-left: 20px; }    .menumain-item .sub-indicator{display: none; }    .sub-menu {display: block; position: static; overflow: hidden; background-color: #212121; padding-left: 48px; }    .sub-menu .submenu-item {float: left; }    .top-fix .container .top-fix-wrap {position: relative; margin: 0 auto; }    .top-fix .header,     .top-fix .container {width: 100%!important; }}@media only screen and (max-width: 959px) and (min-width: 630px) {    .top-fix .container .top-fix-wrap {width: 650px!important; }    .container, .list-wrap { width: 630px; } }@media only screen and (max-width: 629px) and (min-width: 479px) {    .container, #homecontent {width: 385px; }    .container .one-third.column,    .container .one-third.column .post {width: 385px; }    .one-third a img.attachment-thumbnail {margin-left: 0; }}@media only screen and (max-width: 479px) and (min-width: 385px) {    .container, #homecontent {width: 100%; }    .container .one-third.column,     .container .one-third.column .post {width: 100%; }    /*.one-third a img.attachment-thumbnail {height: 220px; width: 100%; margin-left: 0; }*/    .one-third  .img-wrap { display: block; height: 220px; overflow: hidden;}    .one-third a img.attachment-thumbnail {height: auto; width: 100%; margin-left: 0; }}@media only screen and (max-width: 384px) {    .container, #homecontent {width: 100%; }    .container .one-third.column,     .container .one-third.column .post {margin-right: 0; width: 100%; }    #homecontent .img-wrap {display: block; width: 100%; overflow: hidden; }    .one-third a img.attachment-thumbnail {margin-left: 0; }}
Copier après la connexion

可以参考bootstrap.网址www.bootcss.com

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal