Home >Web Front-end >HTML Tutorial >A webpage is not full screen in the browser, but is full screen on the mobile phone_html/css_WEB-ITnose

A webpage is not full screen in the browser, but is full screen on the mobile phone_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:38:311260browse

How to make a web page not full screen in the browser but full screen on the mobile phone
8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
463a8b7108e533b58e342a7dbb7afa6b
8043427c7ffdafc2d061cb4d96dec3d8
87e6354d25f0d56a236c86a2032d4857
a8616b76893f0fb81fa13a4dd4a1b93b
2924b2a0235d5d217597a306df5f1ea7
1fd589692e180fb978cda37041cfc5e26e916e0f7d1e588d4f442bf645aedb2f
080b747a20f9163200dd0a7d304ba388
.div0{overflow: hidden;height: 100%;}
.div1 {position:absolute;margin- left: 350px;}
.div2 {width: 700px; position: absolute;margin-left: 300px;margin-top: 150px;}
.div1 li{width: 338px;display: table-cell;vertical -align: top;}
.div2 li{list-style-type: none;display: inline-block;margin-left: 10%;}
531ac245ce3e4fe3d50054a55f265927
1863d91b1b810e875bb669d7e23899c2
191871121a7f2d9605184988210508b1
428c41199dc7d7a8d8e11a9bf3a6a837
071f4f5ba695e6cda706e8f0c4d32144

16b28748ea4df4d9c2150843fecfba68
fc61642327f9095004cabfb91f332498
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c621d2b62bca04d0ae5fff9beeb8f6d53edf250b2156c434f3390392d09b1c9563Marriage and Familybed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6d068ddd733e7c97f17766dcad95166dd
25edfb22a4f469ecb59f1190150159c67a647a6f3af8b235d86cd08d06fd0d74df250b2156c434f3390392d09b1c9563Traffic accidentbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6< ;img src="img/a4.png">df250b2156c434f3390392d09b1c9563Medical disputesbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6c54f90e9fef18d26d330f75123a86488df250b2156c434f3390392d09b1c9563Criminal Defensebed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c636f459aad2aaf043e36b1588b59e2f24df250b2156c434f3390392d09b1c9563Labor and Personnelbed06894275b65c1ab86501b08a632eb
f821b749595008ba30cec4186b3d11fedf250b2156c434f3390392d09b1c9563Corporate Affairsbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66c6afad5cc6d936e0b41fbc5b439aa30< ;br /> Morebed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
081a934c7ac7a6b28b4ef3b648acdd09


Reply to discussion (solution)

Take a look at media query. It’s quite simple, but it’s troublesome. You can refer to the following:

@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; }}

You can refer to bootstrap. Website www.bootcss.com

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn