Как адаптировать граничный радиус на разных размерах экрана

Я пытаюсь применить border-radius эффект на конкретный div. Используемый мной код:Как адаптировать граничный радиус на разных размерах экрана

/* Multiple compatibility with border radius */ 
/* CSS 3 */ 
border-radius: 50%; 
/* Firefox versiones 3.x */ 
-moz-border-radius: 50%; 
/* Safari desde 3.2 hasta la 4 */ 
-webkit-border-radius: 50%; 
/* Khtml Conqueror */ 
-khtml-border-radius: 50%;

И с этим я имитирую круг: D! Так как там, все в порядке. Я написал несколько строк, чтобы соответствовать различным разрешениям, но сегодня я обнаружил что-то, когда использовал компьютер моего отца.

Я использую 22-дюймовый экран с полным HD. У моего отца 17-дюймовый экран. Я попробовал свой дизайн на разных разрешениях на моем 22-дюймовом экране, и они были верны. Но когда я подошел к моему 17-дюймовому отцовскому монитору и открыл свой сайт, мои круги выглядели как яйцо! Я догадывался, как это могло быть! Я обеспечил свой дизайн своим 22-дюймовым монитором, и со всеми из них, от 800 x 600 от 1920 x 1080, дизайн выглядел правильно.

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

Итак, как я могу сделать свои круги похожими на круги в разных дюймах экрана?

Спасибо!

EDIT:

Хорошо, я редактирую пост, как это не проясняет все. Разрешение моего отца: 1024 x 768. Я пробовал его на своем 22-дюймовом экране, и он выглядит отлично. Но когда я иду на 17-дюймовый экран, они снова яйца! > _ <

И вот я вставить скриншот яиц:

The eggs! К сожалению, с панелями инструментов и так ...

Я убедиться, что они выглядят как круги на экране 22 дюймов ...

РЕДАКТИРОВАТЬ

я изменил оба свойства до 16%. Теперь это выглядит следующим образом:

New eggs!

А теперь ... Я немного потерял. Я думаю, что я мог бы взглянуть на мой код еще раз ...

источник

2012-06-14 Sonhja

Вы можете вставить скриншот из «яйца» на экране вашего отца (в том числе панелей инструментов, если вы можете). Это действительно интересный вопрос. – easwee

Какое разрешение экрана вашего отца? Я подозреваю, что экран сам перекошен/растянут или на экране нет собственного разрешения. еще одна вещь, которую нужно проверить, - посмотреть скриншот/изображение круга, который отображается как круг на вашем компьютере .. и если это выглядит как яйцо на экране вашего папы. –

Я не уверен, правильно ли я понимаю ... но вы пытались дать своим дебам свои собственные идентификаторы, а затем применить css к каждому из них отдельно? 'div # divname {border-radius: 50%; } ' – poepje

Update

Я схватил свой website address from the image.

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

Если ширина составляет 16%, и вы изменяете ширину браузера, круг будет расширяться, но высота не изменится (вы не сделали браузер более высоким).

Например

Высота: 100px и ширина: 100px

16% от 100px является 16px шириной
8% 100px является 8px шириной

сквош браузеру 100px high и 50px wide, и вы получите круги:

16% от 50px является 8px широкого
8% от 100px является 8px высокого

Предыдущего ответа

Это может быть, что разрешение экрана неподходящее, которая вызывает экран себя растягиваться.

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

Если круг отображается правильно, вы можете указать нам демонстрационную страницу или предоставить немного больше своих HTML и CSS, чтобы мы могли проверить это? Другая причина этого заключается в том, что размер ваших ящиков не является «квадратным», прежде чем вы добавляете граничный радиус.

Circle

Circle courtesy of Wikipedia.

источник

2012-06-14 15:01:04 Fenton

Это не так, на моей машине круги изменяются с изменением размера их контейнеров, просто зайдите на его сайт и вы увидите. – Andrew

Это полностью ответ. Круги растягиваются и искажаются вместе с соотношением сторон окна браузера. Он не имеет никакого отношения к размеру монитора. – Sparky

@ Sparky672 - Не могли бы вы объяснить немного больше? – Sonhja

Судя по вашим комментариям, что происходит с вами атм это: http://jsfiddle.net/7AN3R/2/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <style type="text/css"> 

.mydiv { 
    border:1px solid #000; 
    width:8%; 
    height:16%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    -khtml-border-radius: 50%; 
    border-radius: 50%; 
    } 

    </style> 
</head> 
<body> 
    <div style="width:800px;height:600px;"> 
    <div class="mydiv"> 


    </div> 
    </div> 
</body> 
</html>

Попробуйте использовать один и тот же процент как для ширины и высоты вашего круга дел.

Как

.circle{ 
border:1px solid #000; 
width:8%; 
height:8%; 
-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
-khtml-border-radius: 50%; 
border-radius: 50%; 
}

источник

2012-06-14 15:02:27 easwee

Префиксы '-khtml' и' -moz' не нужны сегодня –

@ Владимир Старков - это действительно зависит от того, для какой аудитории вы создаете сайт. В нашей стране многие библиотеки по-прежнему используют старые версии браузеров Mozilla <4 с заблокированными обновлениями. И они хотят, чтобы вы поддержали это, если вы работаете на них. Но да - в идеальном мире ... – easwee

'-moz' нужен только для firefox 1 и ниже,' -khtml' кажется для сафари 1 –

Как адаптировать граничный радиус на разных размерах экрана

ответ

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