Responsive design
In this lesson we will talk about creating responsive web site. In our world a lot of people enter to web sites with mobile phones and tablets. That’s why it is important to make web design, which will look nice in all mobile devices.
before creating responsive design, you must add meta tag мета тэг:
Code lesson (meta viewport)
<meta name="viewport" content="width=device-width, initial-scale=1.0">In detail you can read about this tag here.
After this we begin to write media queries. Media queries are conditions, which css rules will be work.
Media queries example:
Media query example
@media screen and (max-width: 480px) {
.six, .four {
width: 100%;
}
.phone p {
font-size: 18px;
}
}While creating responsive web design and for testing it I recommend to use google chrome console.
I note three important areas:
1 – device for emulation.
2 – orientation (portrait or landscape).
3 – Current CSS rules.
In conclusion it is important to note you strongly don’t need to use min-device-width. You can read about it here
In addition you can read about media queries about here.
Also I add the list of main media queries for main devices
Code lesson (HTML)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Главная</title>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<!--<link rel="stylesheet" href="font-awesome.min.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="wrapperHeader">
<div class="container">
<div class="logo">
<img src="http://kamil-abzalov.ru/wp-content/themes/milleniumSecond/img/logo.png" alt="">
</div>
<div class="phone">
123-45-67
</div>
<div class="search">
<form>
<input type="text"/>
<input type="submit">
</form>
</div>
</div>
</div>
<nav id="menu">
<div class="container">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="about.html">О нас</a>
<ul class="submenu">
<li><a href="#">Наша команда</a></li>
<li><a href="#">Новости</a></li>
</ul>
</li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</div>
</nav>
</header>
<div id="content">
<div class="container">
<div class="text-center">
<h1 >Почему надо выбрать именно нас</h1>
Преимущества, которые вас удивят
</div>
<div class="six">
<h2>Высокое качество</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati beatae accusantium molestiae porro deserunt fugiat cumque, itaque dignissimos debitis modi neque nihil hic, facilis, repudiandae est ad enim quod, unde.
</div>
<div class="six">
<h2>Быстрая доставка</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.
</div>
<div class="four">
<h2>Быстрая доставка</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.
</div>
<div class="four">
<h2>Быстрая доставка</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.
</div>
<div class="four">
<h2>Быстрая доставка</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>Code lesson (CSS)
/*@import url("anahit/anahit.css");*/
html, body {
height: 100%;
}
#content {
min-height: 100%;
}
body {
font-family: "Roboto", "Arial", sans-serif;
font-size: 16px;
color: #202020;
}
header {
box-shadow: 0 0 15px 2px #202020;
}
.container {
margin-right: auto;
margin-left: auto;
padding: 0 15px;
}
.six, .four {
float: left;
}
.six {
width: 50%;
}
.four {
width: 33.3333%;
}
.wrapperHeader {
background-color: #7c4dff;
overflow: hidden;
}
.logo, .phone, .search {
float: left;
width: 33%;
}
.phone p {
color: #fff;
font-size: 25px;
margin-top: 20px;
}
.search form {
margin-top: 25px;
}
nav {
width: 100%;
}
#menu ul {
padding-top: 0;
margin: 0;
}
#menu ul li {
list-style: none;
position: relative;
display: inline-block;
}
#menu ul li a {
color: inherit;
text-decoration: none;
font-size: 16px;
display: block;
padding: 0 10px;
line-height: 40px;
}
#menu ul li:hover .submenu {
display: block;
}
.submenu {
display: none;
position: absolute;
background-color: #fff;
top: 40px;
padding: 0;
border: 1px solid #e1e1e1;
}
.submenu li {
min-width: 170px;
}
.submenu li:hover {
background-color: #7c4dff;
color: #fff;
}
.text-center {
text-align: center;
}
footer {
background-color: #232323;
height: 200px;
clear: both;
}
.icons {
text-align: center;
}
.icons li{
display: inline-block;
list-style:none;
margin: 0 10px;
}
.icons li a {
color: #fff;
}
.fa-vk:hover {
color: #4e729a;
}
.fa-facebook:hover {
color: #3a5795;
}
.fa-twitter:hover {
color: #55acee;
}
.fa-google-plus:hover {
color:#dd4b39;
}
fieldset {
margin-top: -9px;
}
.contactForm input, .contactForm textarea {
width: 97%;
border: 1px solid #e1e1e1;
border-radius: 5px;
padding: 5px;
}
/*in
put[type="submit"] {
width: auto;
border: none;
border-radius: 0;
padding: 0;
}*/
.contactForm button {
float: right;
margin-top: 15px;
background-color: #7c4dff;
color: #fff;
border: none;
border-radius: 3px;
padding: 3px 7px;
}
img {
max-width: 100%;
height: auto;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.phone {
width: 27%;
}
.search {
width: 39%;
}
.logo {
margin-top: 10px;
}
}
@media screen and (max-width: 767px) {
.logo {
width: 60%;
margin-top: 10px;
}
.search {
width: 100%;
}
.search form {
margin-top: 0;
margin-bottom: 10px;
text-align: center;
}
}
@media screen and (max-width: 480px) {
.six, .four {
width: 100%;
}
.phone p {
font-size: 18px;
}
}
0 Comments