Пожалуйста, кто-нибудь может оценить мой код и сказать мне, где я не так?

Question

Я новичок в сети, и это мой первый проект ...

Мне кажется, что я делаю что-то не так,

Возможно, я использую слишком много div?

мой css отделен, и я чувствую себя довольно уверенно с css, однако я хочу теперь сделать эту веб-страницу отзывчивой, что будет самым простым способом для меня?я угадываю медиазапросы?

У меня всегда есть проблемы с макетами и позиционированием вещей

спасибо за вашу помощь, очень признателен

<div class="bottom">

    <div class="licensetxt">

        <h2>License</h2>
        <a name="Link"></a>
        <br>

        <input type="button" id="btnx" style="background-image:url('arrowup.png')" />
        <!-- <img style="position:absolute; left:1100px; top:815px; width:40px; padding: 1px; margin: 1px" src="arrowup.png"> -->


        <h4>License Agreement</h4>

        <p>By purchasing these (“sounds”) you are granted a license to use these sounds for specific uses under the conditions set out below. Ownership remains with the creator Wingman Inc Ltd, and you are required to abide by the following licensing terms.</p>

        <h4>Rights</h4>

        <p>
            This license grants the purchaser an ongoing, non-exclusive, worldwide license.
            You are licensed to use the sounds to create products for yourself or for your clients.
            You may modify the sounds according to your requirements and use them royalty free in your personal and commercial projects. For example, you may use these sounds in an application, website or mobile app you will be designing for a client.
        </p>

        <p>Wingman Inc Ltd will not be responsible for any outcome that may occur during the course of usage of these resources.</p>

        <h4>Prohibitions</h4>

        <p>
            This license prohibits the redistribution, resell, lease, license, sub-license or offer of the file downloaded to any third party.
            For any resalable web applications or mobile software programs, you should not include these sounds as an additional attachment meant for purchase, such as In App Purchasing. This will be considered as a redistribution of our resources which is forbidden by us and pursuant under European Law.
        </p>


    </div>


    <div class="sound">
        <img style="position:absolute; left:620px; top:1400px; width:50px; padding: 1px; margin: 1px;" src="sound-icon-grey@2x.png">
    </div>

</div>

Answer 1

отзывчивым

Создание веб-сайта, отвечающего на запросы СМИ, может занять много времени. Часто слишком много времени.

1. Я бы порекомендовал изучить фреймворк, такой как bootstrap 4

2. Медиа-запросы по-прежнему необходимы. Вам нужно будет масштабировать шрифты и другие вещи.

3. Также обратите внимание на REM для шрифтов, em для отступов и т. Д. Они также могут вам помочь.

Answer 2

1: я что-то не так делаю?

Что ж, изучение веб-разработки - это процесс, и ваш код не будет идеальным с самого начала, но на практике он станет лучше.

Вы можете взглянуть на синтаксис HTML5. Здесь вы будете использовать article / main / section и некоторые другие теги вместо div, что поможет улучшить читаемость.

2: Как сделать его отзывчивым?

Вы можете основывать ширину вещей на ширине родительских divов (display: block; в css это сделает дочерний div на 100% ширины родительского div). Подробнее об этом здесь .

Вы также можете использовать медиа-запросы. Они предназначены для внесения более значительных изменений в дизайн в зависимости от размера экрана. Вы можете найти больше об этом здесь .