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

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

WBOY
Freigeben: 2016-06-24 11:38:31
Original
1261 Leute haben es durchsucht

如何使一个网页在浏览器里不是全屏 在手机端是全屏
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; }}
Nach dem Login kopieren

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage