Witam, chciałbym sprawić, aby strona internetowa była dostosowana do urządzeń mobilnych.
Mam jednak problem tego rodzaju, że w przypadku kodu, który napisałem wyłącznie zmniejszenie okna w przeglądarce powoduje pożądany efekt, natomiast na tabletach i telefonach to nie działa. W tym wypadku prosta zmiana koloru czcionki.
Poniżej kod HTML oraz CSS.
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>T1</title>
<meta name="description" content="T1">
<meta name="keywords" content="T1">
<meta name="author" content="T1">
<meta http-equiv="X-Ua-Compatible" content="IE=edge">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap&subset=latin-ext" rel="stylesheet" media="all">
</head>
<body>
<div class="container">
<div class="east"><div class="in"> <h2> Test 1 </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a eros ut tellus pulvinar aliquet. Donec molestie, felis egestas lobortis ultrices, quam arcu cursus justo, et convallis diam neque a nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere dolor vitae ante consectetur efficitur. Cras nibh sem, mattis sed posuere non, pharetra in ligula. Fusce consectetur, magna sed porta condimentum, ipsum diam rutrum ipsum, eget tempor diam lorem eget magna. In vel eros tristique enim faucibus varius ut vitae diam. In aliquet risus at velit rhoncus venenatis. Praesent tristique enim non ex imperdiet, sit amet feugiat quam facilisis. Nam volutpat nibh sed mauris luctus, in dignissim eros porttitor. Aenean tempor commodo purus in ultricies. Maecenas diam ex, consectetur sed odio non, tristique bibendum est.
Maecenas condimentum, felis non tincidunt hendrerit, est nulla semper purus, a fringilla orci dui at orci. Etiam id augue a libero pulvinar efficitur vitae vel quam. Curabitur tempor dolor eu fringilla posuere. Cras ullamcorper iaculis velit vel suscipit. Nulla tempor leo cursus maximus ullamcorper. Suspendisse potenti. Ut dapibus purus et mauris tincidunt sollicitudin. Quisque bibendum in erat vitae tincidunt. Morbi sit amet mattis leo. Nunc euismod cursus diam, et placerat nunc faucibus sed. Morbi in sollicitudin eros. Pellentesque ultrices metus congue pretium blandit. Nullam ornare urna eu ornare vehicula. Nam non blandit ex.</p></div></div>
<div class="west"><div class="in"> <h2> Test 2 </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a eros ut tellus pulvinar aliquet. Donec molestie, felis egestas lobortis ultrices, quam arcu cursus justo, et convallis diam neque a nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere dolor vitae ante consectetur efficitur. Cras nibh sem, mattis sed posuere non, pharetra in ligula. Fusce consectetur, magna sed porta condimentum, ipsum diam rutrum ipsum, eget tempor diam lorem eget magna. In vel eros tristique enim faucibus varius ut vitae diam. In aliquet risus at velit rhoncus venenatis. Praesent tristique enim non ex imperdiet, sit amet feugiat quam facilisis. Nam volutpat nibh sed mauris luctus, in dignissim eros porttitor. Aenean tempor commodo purus in ultricies. Maecenas diam ex, consectetur sed odio non, tristique bibendum est.
Maecenas condimentum, felis non tincidunt hendrerit, est nulla semper purus, a fringilla orci dui at orci. Etiam id augue a libero pulvinar efficitur vitae vel quam. Curabitur tempor dolor eu fringilla posuere. Cras ullamcorper iaculis velit vel suscipit. Nulla tempor leo cursus maximus ullamcorper. Suspendisse potenti. Ut dapibus purus et mauris tincidunt sollicitudin. Quisque bibendum in erat vitae tincidunt. Morbi sit amet mattis leo. Nunc euismod cursus diam, et placerat nunc faucibus sed. Morbi in sollicitudin eros. Pellentesque ultrices metus congue pretium blandit. Nullam ornare urna eu ornare vehicula. Nam non blandit ex.</p></div></div>
</div>
<div style="clear:both"> </div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
background-color: #FFF;
color: #111;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
}
p{
text-align: justify;
letter-spacing: 1px;
line-height: 200%;
}
.east {
float: left;
width: 30%;
}
.east .in {
padding: 10px;
}
.west {
width: 70%;
float: left;
}
.west .in {
padding: 10px;
}
@media screen and (max-width: 900px){
.east {
width: 100%;
color: red;
float: none;
}
.west {
width: 100%;
color: orange;
float: none;
}
}
@media screen and (max-width: 520px) {
.east {
width: 100%;
color: blue;
float: none;
}
.west {
width: 100%;
color: green;
float: none;
}
}
Czy robię coś źle?
