Выбрать другую таблицу стилей CSS для разных размеров окна браузера? - PullRequest
Новая
       0

Выбрать другую таблицу стилей CSS для разных размеров окна браузера?

1 голос
/ 20 марта 2011

Мой div (#box) центрируется по центру окна браузера, что является отличным для браузеров с вертикальной или высокой версией 600 пикселей. Если окно меньше этого, содержимое в верхней части элемента div срезается, и полоса прокрутки только прокручивает страницу вверх (когда я опускаю полосу прокрутки вниз), поэтому невозможно увидеть что-либо скрытое над верхним краем окно, даже когда полоса прокрутки находится в самом верхнем положении.

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

{position: absolute; top: 50%; left: 50%; width: 1930px; height: 607px; margin-left: -965px; margin-top: -302px;}

(Он действительно широк для размещения анимации, работающей даже на самых широких экранах - ширина не является проблемой.)

Вот страница для просмотра: http://ianmartinphotography.com/test-site/
И мой CSS: http://ianmartinphotography.com/test-site/css/basic.css

Это легко исправить в моей таблице стилей CSS, но кажется, что я не могу использовать оба способа для мониторов с разрешением более 600 пикселей и мониторов с разрешением менее 600 пикселей.

Итак, как определить размер окна браузера, а затем выбрать одну из двух разных таблиц стилей CSS? Одна для маленьких окон, другая для больших окон? Есть ли скрипт jquery, который сделает это для меня?

Или, есть ли другой способ сделать мой центр div в центре окна браузера с помощью CSS , который позволит прокручивать его так, чтобы к вершине div можно было обращаться в меньших окнах браузера?

Спасибо за ваши мысли!

Ответы [ 7 ]

4 голосов
/ 20 марта 2011

@ медиазапросы - это мое предпочтение (я считаю, что вам они не нравятся как решение само по себе), но они действительно могут сработать, особенно если вы немного отрегулируете свой css, чтобы приспособиться. 

<link...media="only screen and (max-height: 600px)" href="small-device.css" />
    small-device.css = div.container { ... height:500px; margin:50%; ...}

<link...media="only screen and (min-height: 601px)" href="big-device.css" />
    big-device.css = div.container {... height:600px; margin:50%; ...}

Вам также может повезти, если вы удалите свое абсолютное позиционирование и воспользуетесь преимуществами нормального документооборота. Это поможет вам добавить такие вещи, как { overflow-y:scroll; } к этим скрытым div-значениям высоты экрана.

Я думаю, в конце концов, если вы пытаетесь разрабатывать на основе портативных устройств, вам понадобятся медиа-запросы в некоторой степени. Мой экран Android (например) имеет 3 варианта отображения (низкий, средний, привет). Все 3 страницы обрезки по-разному.

1 голос
/ 20 марта 2011

Решение, которое работает во всех основных браузерах. JS не требуется. Вертикально / горизонтально отцентрировано, прокручивается, прилипает к вершине, когда содержимое больше, чем область просмотра.

HTML: 

<div id="body">[your content goes here]</div>

CSS: 

html, body {
    width: 100%;
    height: 100%;
    }

html {
    display: table;
}

body {
    display: table-cell;
    vertical-align: middle;
}

#body {
    margin: 0 auto;
}

Не забудьте применить последнее правило, оно фактически выполнит горизонтальное центрирование.

1 голос
/ 20 марта 2011

Вы можете определить размер окна по Jquery 

$(window).width();
$(window).height();

или 

$(document).width();
$(document).height();

затем сменить css 

$("link").attr("href", "blue.css");

Примерно так: 

$(document).ready(function(){

 if($(document).height()  > 600 or $(window).height() > 600){

   $("link").attr("href", "600+.css");

 } else {

   $("link").attr("href", "600-.css");

 }
});
0 голосов
/ 22 марта 2011

Если «document_height» не работает, попробуйте «window_height», я комментирую его в коде!

$("link").attr("href", "css_file_path"); // здесь необходимо вставить путь к вашему CSS, замените его в коде ниже 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>

<script type="text/javascript">

$(document).ready(function(){

document_height = $(document).height();
//window_height = $(window).height();

//if(window_height  > 600){
 if(document_height  > 600){
    alert('Bigger than 600px height: ' + $(document).height());
   $("link").attr("href", "600+.css"); // Here load css if window is bigger then 600px;

 } else {
    alert('Smaller than 600px height: ' + $(document).height());
   $("link").attr("href", "600-.css"); // Here load css if window is smaller then 600px;

 }
});

</script>
0 голосов
/ 20 марта 2011

Попробуйте меньше CSS Framework: http://lessframework.com/,

Вам не нужен JavaScript, но вы можете использовать CSS @Media для установки стилей в зависимости от разрешения / размера экрана.

Удачи

0 голосов
/ 20 марта 2011

Просто немного погуглил и нашел вот что:

http://www.ilovecolors.com.ar/detect-screen-size-css-style/

это у вас работает?

0 голосов
/ 20 марта 2011

Используйте следующее условие JavaScript для определения размера экрана.

function x() будет обрабатывать вставку ссылки CSS в тег <head>.Все, что вам нужно сделать, это вызвать функцию и передать имя файла CSS. 

< script type = "text/javascript" >
<!--
function x(y) {
    var styles = y;
    var newSS = document.createElement('link');
    newSS.rel = 'stylesheet';
    newSS.href = 'data:text/css,' + styles;
    document.getElementsByTagName("head")[0].appendChild(newSS);
}

if ((screen.width >= 1024) && (screen.height >= 768)) {
    x('file.css');
}
else {
    x('file1.css');
}
//-->
< /SCRIPT>
...