How to adapt page without @media?

D

Dovitwtu2018-04-14 17:35:44

Media queries

Dovitwtu, 2018-04-14 17:35:44

There is a finished page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shop Beats</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body style="background-color: #f6f6f6">
    <div class="container">
        
            <p><img src="img/headphones.png" alt=""></p>
        
            <h2>Наушники Beats</h2>
            <p>Накладные наушники с микрофоном, поддержка iPhone,<br> 
                регулятор громкости, разъём mini jack 3.5 mm, длина<br> 
                провода 1.361 м, вес 205 г, складная конструкция <br>
            
            <br><p>Цена</p>
            <p><span class="price">1 999 р.</span> </p>
                    
            <button>Положить в корзину</button> 
        
</div>
<!-- /.container -->
</body>
</html>

@font-face {
    font-family: "ArialBold";
    src: url("../fonts/ArialBold/ArialBold.ttf") format("truetype");
}
body {
    font-size: 16px;
    font-family: "ArialBold";
}
.container {
    display: inline-block;
    width: 85%;
    height: 70%;
    position: absolute;
    margin: 86px 95px;
    background: white;
    border: 1px solid white;
}
.container img {
    width: 300px;
    height: 310px;
    float: left;
    margin: 64px;
    margin-left: 48px;
    margin-right: 140px;
}
.container h2 {
    margin-top: 74px;
    
    font-size: 25px;
}
.container p {
    font-weight: 400;
}
.price {
    font-size: 30px;
    font-weight: 500;
}
button {
    margin-top: 43px;
    margin-bottom: 68px;
    width: 252px;
    height: 50px;
    padding: 16px 16px;
    display: inline-block;
    background-color: #ec744a;
    border: 1px solid #ec744a;
    color: #fff;
    font-size: 19px;
    font-weight: 400;
}
/* Ноутбуки */
@media (max-width: 992px) {
    .container {
    max-width: 85%;
    max-height: 70%;
    }
}

It needs to be adapted to mobile devices without using css. Tell me at least in which direction to move, what to use

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

V

Vladislav Lyskov, 2018-04-14
@Vlatqa

inline styles in html, but what prevents you from using css?

M

monochromer, 2018-04-14
@monochromer

The task is not clear.
If you want the page to simply scale to the browser viewport, you need to remove the meta tag

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

, and 2 times
If, nevertheless, the task is not exact - you can use css, but not @media queries, then you need to use relative units of measurement -%, and vw, vh, vmax, vmin, em, rem to set sizes and indents