Anpassung der HTML-Seite

-1

Hy! Ich möchte meine HTML- und CSS-Seite Größe ändern, wenn der Benutzer die Größe von Browser-Fenster ändert, und ich möchte die Seite an verschiedene Auflösungen anpassen. Ich habe hier auf dieser Seite einige Antworten versucht, aber sie funktionieren nicht für mich. ich versuchte auch Medien zu verwenden abfragtAnpassung der HTML-Seite

Hier finden Sie die CSS und die html

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
body{ 
 
\t font-family: 'Francois One', Arial, Helvetica, sans-serif; 
 
\t color: white; 
 
\t text-align:center; 
 
\t background:black; 
 
\t 
 
} 
 
.corpo{ 
 
\t margin-top: 5px; 
 
\t margin-left: 400px; 
 
\t margin-right: 250px; 
 
\t float:middle; 
 
\t 
 
} 
 
header{ 
 
\t margin: 40px 0; 
 
} 
 
.menu li{ 
 
\t display: block; 
 
\t float: left; 
 
\t width: 125px; 
 
\t height: 50px; 
 
\t line-height: 50px; 
 
\t text-align: center; 
 
\t color: #2C3E50; 
 
\t border-right: 1px solid #2C3E50; 
 
\t background: -webkit-linear-gradient(top, #FFFF00 50%, #FFFF00 51%, #f6f6f6 100%); 
 
\t background: -moz-linear-gradient(top, #FFFF00 50%, #FFFF00 51%, #f6f6f6 100%); 
 
\t background: -o-linear-gradient(top, #FFFF00 50%, #FFFF00 51%, #f6f6f6 100%); 
 
\t background: -ms-linear-gradient(top, #FFFF00 50%, #FFFF00 51%, #f6f6f6 100%); 
 
\t border-color:black; 
 
\t opacity:1; 
 
\t position:relative; 
 
} 
 
.menu li:hover{ 
 
\t cursor: pointer; 
 
\t background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%); 
 
\t background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%); 
 
\t background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%); 
 
\t background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%); 
 
\t color: slateGrey; 
 
\t border-color:black; 
 
\t position:relative; 
 
} 
 
.primo{ 
 
\t border-top-left-radius: 10px; 
 
\t border-bottom-left-radius: 10px; 
 
} 
 
.ultimo{ 
 
\t border-top-right-radius: 10px; 
 
\t border-bottom-right-radius: 10px; 
 
} 
 
.sub-menu{ 
 
\t visibility: hidden; 
 
} 
 
.menu li:hover .sub-menu{ 
 
\t visibility: visible; 
 
} 
 
.sub-menu li{ 
 
\t border-top: 1px dotted #2C3E50; 
 
} 
 
.sub-menu li:hover{ 
 
\t width: 145px; 
 
\t background: -webkit-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%); 
 
\t background: -moz-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%); 
 
\t background: -o-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%); 
 
\t background: -ms-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%); 
 
\t transition: all 0.1s ease 0s; 
 
\t -webkit-transition: all 0.1s ease 0s; 
 
\t -moz-transition: all 0.1s ease 0s; 
 
\t -o-transition: all 0.1s ease 0s; 
 
\t -ms-transition: all 0.1s ease 0s; 
 
} 
 
.ultimo-sub{ 
 
\t border-bottom-left-radius: 10px; 
 
\t border-bottom-right-radius: 10px; 
 
} 
 

 
.menu li a:link{ 
 
color:black; 
 
text-decoration:none; 
 
} 
 

 
.menu li a:hover{ 
 
color:black; 
 
text-decoration:none; 
 
} 
 

 
.menu li a:active{ 
 
color:black; 
 
text-decoration:none; 
 
} 
 

 
.menu li a:visited{ 
 
color:black; 
 
text-decoration:none; 
 
} 
 

 
p{ 
 
\t color: #FFFF00; 
 
\t margin: 0px 380px 0px 400px; 
 
\t font-size:150%; 
 
\t text-shadow: 2px 0 0 #000, 0 -1px 0 #000, 0 2px 0 #000, -1px 0 0 #000;    //text-shadow: 2px 0 0 #000, 0 -1px 0 #000, 0 2px 0 #000, -1px 0 0 #000; 
 
\t 
 
} 
 

 
.Paragrafo{ 
 
\t text-shadow:1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; 
 
\t size:25px; 
 
} 
 

 
.Paragrafo a:link{ 
 
color:yellow; 
 
} 
 

 
.Paragrafo a:hover{ 
 
color:yellow; 
 
} 
 

 
.Paragrafo a:active{ 
 
color:yellow; 
 
} 
 

 
.Paragrafo a:visited{ 
 
color:yellow; 
 
} 
 

 
h1{ 
 
\t color:blue; 
 
\t 
 
} 
 

 
span{ 
 
\t color: #FFFF00; 
 
\t margin: 0px 380px 0px 400px; 
 
\t font-size:150%; 
 
\t text-shadow: 2px 0 0 #000, 0 -1px 0 #000, 0 2px 0 #000, -1px 0 0 #000;    //text-shadow: 2px 0 0 #000, 0 -1px 0 #000, 0 2px 0 #000, -1px 0 0 #000; 
 
\t 
 
} 
 

 
.video{ 
 
\t position: 404 532; 
 
}

<!doctype html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <title>Menù a tendina in HTML e CSS</title> 
 
\t \t <link rel="stylesheet" type="text/css" href="new 1(!).css"> 
 
\t \t <style> h1 {color:yellow; 
 
\t \t    float:center; 
 
\t \t   } </style> \t \t  
 
\t </head> \t \t \t  
 
\t <body> 
 
\t 
 
\t \t 
 
\t \t <header> 
 
\t \t \t \t <h1>La Grande Guerra</h1> 
 
\t \t </header> 
 
\t \t <div class="corpo"> 
 
\t \t \t <ul class="menu"> 
 
\t \t \t \t <li class="primo"><a href="SitoHome2(!).html">Home</a></li> 
 
\t \t \t \t <li><a href="1914.html">1914</a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li><a href="1915.html">1915</a> 
 
\t \t \t \t \t <ul class="sub-menu"> 
 
\t \t \t \t \t \t <li><a href="1915-1.html">Da 01 a 04</a></li> 
 
\t \t \t \t \t \t <li><a href="1915-2.html">Da 05 a 08</a></li> 
 
\t \t \t \t \t \t <li class="ultimo-sub"><a href="1915-3.html">Da 09 a 12</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li><a href="1916.html">1916</a> 
 
\t \t \t \t \t <ul class="sub-menu"> 
 
\t \t \t \t \t \t <li><a href="1916-1.html">Da 01 a 04</a></li> 
 
\t \t \t \t \t \t <li><a href="1916-2.html">Da 05 a 08</a></li> 
 
\t \t \t \t \t \t <li class="ultimo-sub"><a href="1916-3.html">Da 09 a 12</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li><a href="1917.html">1917</a> 
 
\t \t \t \t \t <ul class="sub-menu"> 
 
\t \t \t \t \t \t <li><a href="1917-1.html">Da 01 a 04</a></li> 
 
\t \t \t \t \t \t <li><a href="1917-2.html">Da 05 a 08</a></li> 
 
\t \t \t \t \t \t <li class="ultimo-sub"><a href="1917-3.html">Da 09 a 12</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t  </li> 
 
\t \t \t \t <li><a href="1918.html">1918</a> 
 
\t \t \t \t \t <ul class="sub-menu"> 
 
\t \t \t \t \t \t <li class="ultimo-sub"><a href="1918-1.html">Eventi</a></li> 
 
\t \t \t \t  </ul> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li><a href="#">Armistizio</a> 
 
\t \t \t \t \t <ul class="sub-menu"> 
 
\t \t \t \t \t \t <li class="ultimo-sub"><a href="#">Conseguenze</a></li> 
 
\t \t \t \t  </ul> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li><a href="Galleria.html">Galleria</a> 
 
\t \t \t \t \t <ul class="sub-menu"> 
 
\t \t \t \t  </ul> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="ultimo"><a href="Fonti.html">Fonti</A></li> 
 
\t \t \t \t 
 
\t \t \t </ul> 
 
\t \t </div> <BR> <br> <br> <br> <br> <br> <br> 
 
\t \t <div class=Paragrafi> 
 
\t \t <p> 
 
\t \t 
 
      TEXT 
 
      
 
\t \t <object class=video width="420" height="315"data="https://www.youtube.com/embed/6FgaL0xIazk?list=PLB2vhKMBjSxOb_127vxjaRRC7yu2TJlJX" 
 
\t \t float=left align=right> 
 
     </object> 
 
\t \t </p> 
 
      
 
\t \t <p align=left> 
 
      
 
      TEXT 
 
    
 
\t \t </p> 
 
\t \t 
 

 
\t \t 
 
    </body> 
 
</html>

Quelle

2016-04-23 Livio Borgogna

Sie können versuchen, einige fertige CSS-Frameworks wie Bootstrap für effiziente responsive Webdesign verwenden –

Hy Jones, können Sie mir ein Beispiel schreiben? –

Sie fehlt das Ansichtsfenster-Meta-Tag ist.

<meta name="viewport" content="width=device-width, initial-scale=1">

Jetzt sollte es funktionieren Medienabfragen verwenden. Sie können diese URL überprüfen, um weitere Informationen: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Quelle

2016-04-23 18:07:58

m a noob bei der Codierung, also können Sie ein Beispiel für meine Bedürfnisse machen? –

Dies ist nicht von mir erstellt, aber es könnte Ihnen helfen, zu verstehen, was ich zu sagen versuche. http://jsfiddle.net/DrSRT/ –

Nikhilesh Ich habe ein Problem festgestellt. Wenn ein mehr Abfragen nur die neuesten, die ich dem Code hinzugefügt habe, funktioniert. Ex. @ media Bildschirm und (min-Breite: 761px) und ich füge ein weiteres die neueste wird –

Fügen Sie diese in Ihrem CSS-Blatt

/* 
 
    Based on: 
 
    1. http://stephen.io/mediaqueries 
 
    2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 
 
*/ 
 

 
/* iPhone 6 in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 375px) 
 
and (max-device-width : 667px) { 
 
    
 
} 
 

 
/* iPhone 6 in landscape */ 
 
@media only screen 
 
and (min-device-width : 375px) 
 
and (max-device-width : 667px) 
 
and (orientation : landscape) { 
 
    
 
} 
 

 
/* iPhone 6 in portrait */ 
 
@media only screen 
 
and (min-device-width : 375px) 
 
and (max-device-width : 667px) 
 
and (orientation : portrait) { 
 
    
 
} 
 

 
/* iPhone 6 Plus in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 414px) 
 
and (max-device-width : 736px) { 
 
    
 
} 
 

 
/* iPhone 6 Plus in landscape */ 
 
@media only screen 
 
and (min-device-width : 414px) 
 
and (max-device-width : 736px) 
 
and (orientation : landscape) { 
 
    
 
} 
 

 
/* iPhone 6 Plus in portrait */ 
 
@media only screen 
 
and (min-device-width : 414px) 
 
and (max-device-width : 736px) 
 
and (orientation : portrait) { 
 
    
 
} 
 

 
/* iPhone 5 & 5S in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 568px) { 
 
    
 
} 
 

 
/* iPhone 5 & 5S in landscape */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 568px) 
 
and (orientation : landscape) { 
 
    
 
} 
 

 
/* iPhone 5 & 5S in portrait */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 568px) 
 
and (orientation : portrait) { 
 
    
 
} 
 

 
/* 
 
    iPhone 2G, 3G, 4, 4S Media Queries 
 
    It's noteworthy that these media queries are also the same for iPod Touch generations 1-4. 
 
*/ 
 

 
/* iPhone 2G-4S in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 480px) { 
 
    
 
} 
 

 
/* iPhone 2G-4S in landscape */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 480px) 
 
and (orientation : landscape) { 
 
    
 
} 
 

 
/* iPhone 2G-4S in portrait */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 480px) 
 
and (orientation : portrait) { 
 
    
 
} 
 

 
/* iPad in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) { 
 
    
 
} 
 

 
/* iPad in landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : landscape) { 
 
    
 
} 
 

 
/* iPad in portrait */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : portrait) { 
 
    
 
} 
 

 
/* Galaxy S3 portrait and landscape */ 
 
@media screen 
 
    and (device-width: 320px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 2) { 
 

 
} 
 

 
/* Galaxy S3 portrait */ 
 
@media screen 
 
    and (device-width: 320px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 2) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* Galaxy S3 landscape */ 
 
@media screen 
 
    and (device-width: 320px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 2) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* Galaxy S4 portrait and landscape */ 
 
@media screen 
 
    and (device-width: 320px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) { 
 

 
} 
 

 
/* Galaxy S4 portrait */ 
 
@media screen 
 
    and (device-width: 320px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* Galaxy S4 landscape */ 
 
@media screen 
 
    and (device-width: 320px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* Galaxy S5 portrait and landscape */ 
 
@media screen 
 
    and (device-width: 360px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) { 
 

 
} 
 

 
/* Galaxy S5 portrait */ 
 
@media screen 
 
    and (device-width: 360px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* Galaxy S5 landscape */ 
 
@media screen 
 
    and (device-width: 360px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* HTC One portrait and landscape */ 
 
@media screen 
 
    and (device-width: 360px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) { 
 

 
} 
 

 
/* HTC One portrait */ 
 
@media screen 
 
    and (device-width: 360px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* HTC One landscape */ 
 
@media screen 
 
    and (device-width: 360px) 
 
    and (device-height: 640px) 
 
    and (-webkit-device-pixel-ratio: 3) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* 
 
    iPad 3 & 4 Media Queries 
 
    If you're looking to target only 3rd and 4th generation Retina iPads 
 
    (or tablets with similar resolution) to add @2x graphics, 
 
    or other features for the tablet's Retina display, use the following media queries. 
 
*/ 
 

 
/* Retina iPad in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (-webkit-min-device-pixel-ratio: 2) { 
 
    
 
} 
 

 
/* Retina iPad in landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : landscape) 
 
and (-webkit-min-device-pixel-ratio: 2) { 
 
    
 
} 
 

 
/* Retina iPad in portrait */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : portrait) 
 
and (-webkit-min-device-pixel-ratio: 2) { 
 
    
 
} 
 

 
/* 
 
    iPad 1 & 2 Media Queries 
 
    If you're looking to supply different graphics or choose different typography 
 
    for the lower resolution iPad display, the media queries below will work 
 
    like a charm in your responsive design! 
 
*/ 
 

 
/* iPad 1 & 2 in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (-webkit-min-device-pixel-ratio: 1) { 
 
    
 
} 
 

 
/* iPad 1 & 2 in landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : landscape) 
 
and (-webkit-min-device-pixel-ratio: 1) { 
 
    
 
} 
 

 
/* iPad 1 & 2 in portrait */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : portrait) 
 
and (-webkit-min-device-pixel-ratio: 1) { 
 
    
 
} 
 

 
/* iPad mini in portrait & landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (-webkit-min-device-pixel-ratio: 1) { 
 
    
 
} 
 

 
/* iPad mini in landscape */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : landscape) 
 
and (-webkit-min-device-pixel-ratio: 1) { 
 

 
} 
 

 
/* iPad mini in portrait */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : portrait) 
 
and (-webkit-min-device-pixel-ratio: 1) { 
 
    
 
} 
 

 
/* Galaxy Tab 10.1 portrait and landscape */ 
 
@media 
 
    (min-device-width: 800px) 
 
    and (max-device-width: 1280px) { 
 

 
} 
 

 
/* Galaxy Tab 10.1 portrait */ 
 
@media 
 
    (max-device-width: 800px) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* Galaxy Tab 10.1 landscape */ 
 
@media 
 
    (max-device-width: 1280px) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* Asus Nexus 7 portrait and landscape */ 
 
@media screen 
 
    and (device-width: 601px) 
 
    and (device-height: 906px) 
 
    and (-webkit-min-device-pixel-ratio: 1.331) 
 
    and (-webkit-max-device-pixel-ratio: 1.332) { 
 

 
} 
 

 
/* Asus Nexus 7 portrait */ 
 
@media screen 
 
    and (device-width: 601px) 
 
    and (device-height: 906px) 
 
    and (-webkit-min-device-pixel-ratio: 1.331) 
 
    and (-webkit-max-device-pixel-ratio: 1.332) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* Asus Nexus 7 landscape */ 
 
@media screen 
 
    and (device-width: 601px) 
 
    and (device-height: 906px) 
 
    and (-webkit-min-device-pixel-ratio: 1.331) 
 
    and (-webkit-max-device-pixel-ratio: 1.332) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* Kindle Fire HD 7" portrait and landscape */ 
 
@media only screen 
 
    and (min-device-width: 800px) 
 
    and (max-device-width: 1280px) 
 
    and (-webkit-min-device-pixel-ratio: 1.5) { 
 

 
} 
 

 
/* Kindle Fire HD 7" portrait */ 
 
@media only screen 
 
    and (min-device-width: 800px) 
 
    and (max-device-width: 1280px) 
 
    and (-webkit-min-device-pixel-ratio: 1.5) 
 
    and (orientation: portrait) { 
 
    
 
} 
 

 
/* Kindle Fire HD 7" landscape */ 
 
@media only screen 
 
    and (min-device-width: 800px) 
 
    and (max-device-width: 1280px) 
 
    and (-webkit-min-device-pixel-ratio: 1.5) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* Kindle Fire HD 8.9" portrait and landscape */ 
 
@media only screen 
 
    and (min-device-width: 1200px) 
 
    and (max-device-width: 1600px) 
 
    and (-webkit-min-device-pixel-ratio: 1.5) { 
 

 
} 
 

 
/* Kindle Fire HD 8.9" portrait */ 
 
@media only screen 
 
    and (min-device-width: 1200px) 
 
    and (max-device-width: 1600px) 
 
    and (-webkit-min-device-pixel-ratio: 1.5) 
 
    and (orientation: portrait) { 
 
    
 
} 
 

 
/* Kindle Fire HD 8.9" landscape */ 
 
@media only screen 
 
    and (min-device-width: 1200px) 
 
    and (max-device-width: 1600px) 
 
    and (-webkit-min-device-pixel-ratio: 1.5) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* Laptops non-retina screens */ 
 
@media screen 
 
    and (min-device-width: 1200px) 
 
    and (max-device-width: 1600px) 
 
    and (-webkit-min-device-pixel-ratio: 1) { 
 
    
 
} 
 

 
/* Laptops retina screens */ 
 
@media screen 
 
    and (min-device-width: 1200px) 
 
    and (max-device-width: 1600px) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
    and (min-resolution: 192dpi) { 
 
    
 
} 
 

 
/* Apple Watch */ 
 
@media 
 
    (max-device-width: 42mm) 
 
    and (min-device-width: 38mm) { 
 

 
} 
 

 
/* Moto 360 Watch */ 
 
@media 
 
    (max-device-width: 218px) 
 
    and (max-device-height: 281px) { 
 

 
}

Quelle

2016-04-23 19:27:27 mlegg

Sie die viewport tag in Ihrem HTML sind vermisst:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ich empfehle, ein Front-End-Framework zu verwenden wie Bootstrap oder Foundation, um damit umzugehen und Ihre Website für jedes Gerät bereit zu machen.

Quelle

2016-04-23 19:35:18

Anpassung der HTML-Seite

Antwort

Verwandte Themen