Как настроить в соответствии с разным разрешением экрана

-2

Я сделал эту страницу с разрешением экрана 1366 x 768. Панель приборов выглядит хорошо здесь, но когда я проверил ее на 1024 x 768, это стало беспорядочным. Пожалуйста, помогите мне! Вот код.Как настроить в соответствии с разным разрешением экрана

<style> 
    #heading{ 
    text-align:right; 
    font-size: 20px; 
    float:right; 
    margin:50px 20px; 
    } 
</style> 

<h1 align="center" style="position:absolute;top:30px; left:600px;"> 
    KARMA <br>(3-SEATER) 
</h1> 
<div id="heading"> 
    <a href="home.php" style="text-decoration:none;">Home</a> 
    &nbsp;&nbsp;&nbsp; 
    <a href="pswd.php" style="text-decoration:none;">Change Password</a> 
    &nbsp;&nbsp;&nbsp; 
    <a href="logout.php" style="text-decoration:none;">Logout</a> 
    &nbsp;&nbsp;&nbsp; 
    <a href="UserManual.pdf" target="_blank" style="text-decoration:none;">Help</a> 
</div>

источник

2015-05-05 AK_56

если вы делаете страницу с разрешением '1366 * 768', чем она будет выглядеть одинаково в' 1024 x 768' ??? вам нужно google для 'responsive html layout' .. и попробуйте изучить' bootstrap' ... –

вам нужна отзывчивая CSS-фреймворк: 'bootstrap',' foundation', 'skeleton' и т. д. ..... есть много –

если вы используете HTML5

вы можете добавить

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

<head> к элементу это будет регулировать содержание тела к ширине любого устройства независимо от разрешения п все .. .

источник

2015-05-05 05:47:25 Meeshal

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

Отзывчивый Framework

Отзывчивое структура поможет вам создать адаптивные сайты, bootstrap и foundation два ключевых реагирующие структуры широко используются в отзывчивый веб-дизайн. Если вы новичок в бутстрапе, веб-сайт, таких как shoelace может помочь вам создать визуальное представление макета сайта на различных устройствах

медиазапросы

Медиа запросы используются для отображения различные правила стиля в зависимости от размера экрана. Обратите внимание: они не меняют основной код HTML, а только стиль, однако это можно использовать для отображения/скрытия элементов. Пример медиа-запрос для маленького возможно экрана мобильного будет:

@media (max-width: 700px) { ... }

Есть правила стиля вы размещаете здесь будет применяться только к документу, когда ширина устройства составляет от 0 - 700 ПВ

Как настроить в соответствии с разным разрешением экрана

ответ

Смежные вопросы