Условия CSS для разрешений экрана
В разработке современного дизайна большое внимание уделяется отображению сайта на различных устройствах: мониторах компьютера, планшетах, телефонах и других устройств, с которых возможен выход в интернет.
До недавнего времени, разработчикам и верстальщикам сайтов приходилось бороться с кроссбраузерностью — отображением сайта одинаково при просмотре сайта в различных браузерах : Opera, Mozilla, Chromу и конечно же, так нелюбимый всеми верстальщиками — Internet Explorer.
С внедрением в жизнь мобильных технологий и популиризацией мобильных устройств, у верстальщиков и разработчиков сайтов появилась новая проблема — правильное отображение сайта на различных мобильных устройствах, с различным разрешением экрана. Но на спасение разработчиков в CSS3 появилась замечательная возможность media queries — при помощи различных условий, задавать правила css для определенной группы устройств, с различным разрешением. Ниже приведены все правила, при которых можно задать условия в СSS3 для определения ширины экрана, с которого просматривается сайт.
/* monitors and laptops */
@media screen and (min-width: 1240px) {}
/* tablet */
@media screen and (min-width: 1024px) and (max-width: 1240px) {}
@media screen and (min-width: 768px) and (max-width: 1024px) {}
/* mobile */
@media screen and (max-width: 768px) {}
/* iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
/* iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
/* Retina iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {}
/* Retina iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {}
/* Retina iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){}
/* iPad 1 & 2 in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad 1 & 2 in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPhone 5 in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}
/* iPhone 5 in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}
/* iPhone 5 in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {}
/* iPhone 2G-4S in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
/* iPhone 2G-4S in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {}
/* iPhone 2G-4S in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {}
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {}
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {}
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {}
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){}
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){}
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min—moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {/* CSS */}
Надеемся, что эта информация была вам полезна в разработуке вашего сайта и ваш сайт теперь отображается отлично на всех экранах и устройствах!
А если у вас нет достаточных знаний в самостоятельном создании сайта, доверьте это дело профессионалам! Обращайтесь, и мы вам обязательно поможем с подключением иконочного шрифта.
sampleweb.ru
Сделать ширину сайта в зависимости от разрешения монитора. @ Media — Примеры
В 2006 году большинство пользователей имело экран монитора 800*600. Но время неумолимо и в какой-то момент «нормальным» стал 1024*768. У веб-ресурсов, ориентированных на меньшее разрешение, появилось пустое пространство по бокам. Всё большую популярность стали приобретать «резиновые» сайты, которые создаются путём использования
- @Media,
- относительных величин.
@Media CSS
Для того, чтобы адаптировать дизайн web-проекта под разные устройства (мобильные телефоны, планшетники, принтеры и т.п.) применяется @Media. Из всего многообразия types и Queries, как правило, внедряют print и width. Рассмотрим последний. Он влияет на отображение сайта в окне браузера разной ширины. Поэтому для того, чтобы увидеть его в действии, достаточно уменьшить размеры окна браузера .
Попробуйте это сделать прямо сейчас. И вы увидите как боковая панель данного блога распадается (поиск перемещается вниз, содержание переходит в тело статьи), в меню сокращаются списки, убирается надпись «Дата обновления» и т.д.
Макет с изначальными значениями блоков указан здесь. Добавим правила перед тегом </style>
@media (max-width: 930px) {
.content-wrapper {padding: 0;}
}
@media (max-width: 930px) and (min-width: 470px) {
aside {position: static; width: 100%; background: #ccc;}
}
@media (max-width: 469px) {
body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;}
aside {display: none;}
}CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:
<link rel='stylesheet' href='URL_по_умолчанию.css' /> <link rel='stylesheet' media='(min-width: 1600px)' href='URL_большой.css' /> <link rel='stylesheet' media='(max-width: 1599px) and (min-width: 800px)' href='URL_средний.css' /> <link rel='stylesheet' media='(max-width: 799px)' href='URL_маленький_экран.css' />
Размещение экрана как «пейзаж» (ширина больше высоты) и «портрет» (ширина меньше высоты)
@media all and (orientation:landscape) {
/* стили для пейзажа */
}
@media all and (orientation:portrait) {
/* стили для портрета */
}или<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
shpargalkablog.ru
Умная адаптация ширины блочных элементов на чистом CSS 2.0 / Habr
Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой — использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.У каждого из этих решений есть свои плюсы и минусы, хочу заострить внимание на минусах, так как обычно именно между двух зол именно в отражении минусов этих решений приходится выбирать.
Фиксированная ширина макетной сетки
Вёрстку загоняют в горизонтальный габарит 960—980 пикселей (чтобы на большинстве устройств в большинстве разрешений всё входило), что при больших горизонтальных размерах окна выглядит как-то зябко — тонкая вертикальная полоса полезного содержимого страницы и огромные бесполезные поля неиспользуемого пространства по бокам.
«Резиновая» макетная сетка по ширине окна
Ещё одна распространённая проблема этого решения — боковые отступы при больших горизонтальных размерах окна уже не так удачно визуально согласуются с горизонтальными размерами элементов, что также не добавляет комфорта при взгляде на свёрстанный макет.
Хочу предложить нехитрый вариант решения — ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.
Update: Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже — это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.Ещё раз акцентирую внимание: в посте не идёт речь про решение для всех видов устройств и все диапазоны разрешений. В рамках одного макета эта задача не решаема в принципе, для её решения так или иначе потребуется несколько макетов. Мухи отдельно, котлеты отдельно.
Создаём контейнер макета:
<html>
<head>
...
</head>
<body>
<div>
...
</div>
</body>
</html>
Оформляем его незатейливым кодом стиля:
div.page-container {
min-width: 960px;
max-width: 75%;
margin: 0 auto;
padding: 0;
}
Однако этого решения кому-то может показаться мало в силу того что при очень больших горизонтальных размерах окна опять проявляются проблемы с длиной строк. Это решается настолько же простым дополнительным приёмом: создание дополнительного внешнего контейнера внутри уже описанного и ограничение его максимальной ширины фиксированным значением (мне субъективно кажется, что лучше всего подходят значния в диапазоне 1400—1600 пикселей). Опять же используем лишь средства CSS 2.0. Такое решение вместо предложенного в первом комментарии простого добавления ширины в процентах для исходного контейнера будет работать ещё и в IE, который вплоть до 9 версии не понимает одновременного указания значений.
Дополняем HTML:
<html>
<head>
...
</head>
<body>
<div>
<div>
...
</div>
</div>
</body>
</html>
И немного меняем CSS:
div.page-container {
max-width: 75%;
min-width: 960px;
margin: 0 auto;
padding: 0;
}
div.page-container-inner {
min-width: 960px;
max-width: 1600px;
margin: 0 auto;
padding: 0;
}
Как видите — решение предельно просто и достаточно универсально, может применяться для любых блочных элементов.
habr.com
CSS / HTML подходит для любого разрешения
html,body, div, span, object, iframe, h2, h3, h4, h5, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
/*!!!!!END OF RESET!!!!!*/
/*MY CSS*/
body {
width: 100%;
height: 100%;
}
#logo1 {
padding-left: 25px;
}
#logo2 {
padding-left: 260px;
}
#eternal {
padding-top: 15px;
display: block;
position: absolute;
left: 0;
}
#prwtoetis {
padding-top: 20px;
float: right;
position: absolute;
bottom: 0%;
left: 0;
}
#akyri {
padding-top: 5px;
display: block;
position: absolute;
right: 0%;
}
#akyri2 {
padding-top: 5px;
display: block;
bottom: 0%;
right: 0%;
position: absolute;
}
#quote {
text-align: center;
padding: 13%;
font-family: Calibri;
font-size: 35px;
}
a {
color: #000;
text-decoration: none;
}
body {
background-color: #e1e8ea;
width: 100%;
min-width: 600px;
max-width: 2000px
}
header {
background-color: #b5c4c9;
padding-top: 8px;
padding-bottom: 10px;
width: 100%;
height: 159px;
}
header img {
float: left;
}
nav {
float: left;
}
nav ul {
margin-top: 86px;
margin-left: 200px;
}
nav ul li {
display: inline-block;
margin-left: 20px;
}
nav ul li a {
font-family: Calibri;
font-size: 22px;
}
a.ex5:hover,
a.ex5:active {
text-decoration: underline;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RateYourProfessor</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>
<header>
<div>
<img src="images/logo.png">
<nav>
<ul>
<li><a href="index.php">HOME</a></li>
<li><a href="create.php">CREATE PROFESSOR</a></li>
<li><a href="rate.php">RATE PROFESSOR</a></li>
<li><a href="scoreboard.php">SCOREBOARD</a></li>
<li><a href="top5.php">TOP 5</a></li>
</ul>
</nav>
<img src="images/logo.png">
</div>
</header>
<section>
<div>
<img src="images/eternal.png">
<img src="images/prwtoetis.png">
<img src="images/akyri.png">
<img src="images/akyri2.png">
</div>
<div><br> There is no end to education. <br>It is not that you read a book, pass an examination, and finish with education. <br>The whole of life, from the moment you are born to the moment you die, is a process of learning.
<br>- <i>Jiddu Krishnamurti</i>
</div>
</section>
</div>
</body>
</html>qa-help.ru
Верстка для разных экранов — СайтоСтроение
На сегодня представлено достаточно большое количество экранов, которые имеют различные разрешения, а значит и сайты на них отображаются по-своему. Это обязательно нужно учитывать при написании кода и соблюдать правила верстки для разных экранов.
В предыдущей статье, мы уже рассмотрели, как можно выполнить верстку для разных браузеров, здесь же речь пойдет о разных экранах и их разрешениях.
Одним из способов «борьбы» с различными разрешениями является использование резиновой верстки. При этом сайт будет растягиваться и сжиматься под разные разрешения, это можно увидеть на сайтах при изменении ширины браузера. На моем сайте напротив, используется статическая верстка.
Чтобы применить верстку для разных экранов, поможет правило стилей @media. Например,
@media (max-width:1024px;) {
.all {padding: 10px;}
}
Данная запись говорит о том, что для класса all будет применены отступы в 10px в том случае, когда разрешение экрана будет до 1024px.
Если требуется указать правило для промежуточных экранов, то запись будет следующая:
@media (min-width:1024px;) and (max-width:1640px) {
.all {padding: 10px;}
table {width:80%}
}
В этом случае свойства стилей будут применены для экранов, которые используют разрешения от 1024 до 1640px.
В том случае, если для определенного разрешения будет большое количество различных стилей, то рациональнее будет вынести их в отдельный файл. Для этого, при указании пути из основной страницы сайта, нужно выполнить такую запись в пределах <head>:
<link rel=’stylesheet’ type=»text/css» href=’css/style.css’ />
<link rel=’stylesheet’ type=»text/css» media='(min-width: 1024px)’ href=’css/style1024.css’ />
<link rel=’stylesheet’ type=»text/css» media='(max-width: 1024px) and (min-width: 800px)’ href=’css/style800.css’ />
Когда нужно указать правила только для мобильных устройств (планшеты, смартфоны), то в данном случае применяется запись max-device-width или min-device-width для обозначения максимального и минимального разрешений соответственно.
Также можно обозначать использование правил только для экранов мониторов, при этом применяется атрибут — screen. Запись будет иметь вид:
@media screen (max-width:1380px) { … }
Она обозначает, что стили будут применены только к настольным компьютерам, с шириной экрана до 1380px.
Таким же образом, вместо screen, можно указывать handheld (мобильные устройства), print (принтеры), projection (проекторы), tv (телевизоры).
Если Вы хотите уведомлять своих посетителей о последних новинках, сообщать последние новости, то можете заказать рассылку по электронной почте, которая реализовывается с помощью специального сервиса. Он поможет вам без забот вести удобную и качественную рассылку.
spinch.net.ua
CSS/HTML подходит для любого разрешения — html
html,body, div, span, object, iframe, h2, h3, h4, h5, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
/*!!!!!END OF RESET!!!!!*/
/*MY CSS*/
body {
width: 100%;
height: 100%;
}
#logo1 {
padding-left: 25px;
}
#logo2 {
padding-left: 260px;
}
#eternal {
padding-top: 15px;
display: block;
position: absolute;
left: 0;
}
#prwtoetis {
padding-top: 20px;
float: right;
position: absolute;
bottom: 0%;
left: 0;
}
#akyri {
padding-top: 5px;
display: block;
position: absolute;
right: 0%;
}
#akyri2 {
padding-top: 5px;
display: block;
bottom: 0%;
right: 0%;
position: absolute;
}
#quote {
text-align: center;
padding: 13%;
font-family: Calibri;
font-size: 35px;
}
a {
color: #000;
text-decoration: none;
}
body {
background-color: #e1e8ea;
width: 100%;
min-width: 600px;
max-width: 2000px
}
header {
background-color: #b5c4c9;
padding-top: 8px;
padding-bottom: 10px;
width: 100%;
height: 159px;
}
header img {
float: left;
}
nav {
float: left;
}
nav ul {
margin-top: 86px;
margin-left: 200px;
}
nav ul li {
display: inline-block;
margin-left: 20px;
}
nav ul li a {
font-family: Calibri;
font-size: 22px;
}
a.ex5:hover,
a.ex5:active {
text-decoration: underline;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RateYourProfessor</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>
<header>
<div>
<img src="images/logo.png">
<nav>
<ul>
<li><a href="index.php">HOME</a></li>
<li><a href="create.php">CREATE PROFESSOR</a></li>
<li><a href="rate.php">RATE PROFESSOR</a></li>
<li><a href="scoreboard.php">SCOREBOARD</a></li>
<li><a href="top5.php">TOP 5</a></li>
</ul>
</nav>
<img src="images/logo.png">
</div>
</header>
<section>
<div>
<img src="images/eternal.png">
<img src="images/prwtoetis.png">
<img src="images/akyri.png">
<img src="images/akyri2.png">
</div>
<div><br> There is no end to education. <br>It is not that you read a book, pass an examination, and finish with education. <br>The whole of life, from the moment you are born to the moment you die, is a process of learning.
<br>- <i>Jiddu Krishnamurti</i>
</div>
</section>
</div>
</body>
</html>qaru.site
Подмена файла стилей style.css в зависимости от разрешения экрана монитора
Разрешение экрана монитора
Стандартным разрешением экрана, до недавнего времени, считались размеры: 1024 px – ширина и 768 px – высота. Именно на такой монитор старались ориентироваться web мастера при верстке очередного web ресурса. Но прогресс не стоит на месте и сегодня при создании сайта необходимо учитывать все разнообразие мониторов для того, чтобы дизайн Вашего сайта отображался одинаково при любом разрешении экрана у пользователя.
Вот об этом я и хочу рассказать в этой статье.
Для начала выясним, какие свойства и каких элементов дизайна придется изменять, чтобы сохранить внешний вид веб страницы. Во-первых, это фоновый рисунок – т. е. свойство background-image для body. Далее идут: размер шрифта – font-size и размеры картинок width и height для элементов img. Как Вы уже догадались, все эти свойства находятся в одном файле стилей – style.css. Поэтому, на мой взгляд, проще всего при загрузке страницы узнать разрешение экрана монитора у пользователя, а затем в зависимости от размеров ширины (width) и высоты (height) заменить файл style.css на соответствующий данным параметрам.
Всё вышесказанное будем реализовывать при помощи javascript.
Определяем разрешение экрана пользователя
var w = screen.width; //- ширина экрана монитора
var h = screen.height; //- высота экрана монитора
Задаём условие
// для разрешений меньше или равных 1024х768
if (w <= '1024' && h <= '768')
// или
if (w == '1280' && h == '1024') – //для разрешения 1280х1024/
//если хотим задать диапазон разрешений, то можно указать ширину без высоты/
if (w >= '1024' && w<= '1280')
это будет зависеть от фоновой картинки и других элементов дизайна страницы сайта.
Подменяем файл стилей style.css.
{document.getElementById("stylesheet").href="css/style_1024х768.css";}
Предварительно не забудьте прописать в подключении файла стилей:
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
Функция для замены CSS в соответствии с разрешением экрана.
function changeCss() {
var w = screen.width;
var h = screen.height;
if (w <= '1024' && h <= '768')
{
document.getElementById("stylesheet").href="css/style_1024х768.css";
}
else
{
if (w == '1152' && h == '864')
{
document.getElementById("stylesheet").href="css/style_1152х864.css";
}
else
{
if (w == '1280' && h == '800')
{
document.getElementById("stylesheet").href="css/style_1280х800.css";
}
else
{
if (w >= '1280' && h >= '1024')
{
document.getElementById("stylesheet").href="css/style_1024х1024.css";
}
};
};
};
};
Теперь остаётся сохранить данную функцию в файле javascript.js и перед закрывающемся тегом </head> сделать подключение и запуск.
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript">
window.onload = changeCss;
</script>
</head>
Вот и всё.
Вопросы, замечания и предложения оставляйте в комментариях.
www.wellsait.ru