Возможно ли это создать с помощью динамического макета DIV?

Question

Возможно ли это создать с помощью динамического макета DIV?

0

Я хотел бы создать макет, подобный этому изображению:

Я могу создать это со статическими значениями (px) в css, но я хотел бы знать, возможно ли создать этот макет с максимальной шириной ширины? Таким образом, он будет расти и сокращаться.

Спасибо за вашу помощь!

James 17 дек. 2013, в 07:03

Источник

0

Конечно ... Просто используйте проценты.
JAL 17 дек. 2013, в 05:28

Теги:

html

css

responsive-design

fluid-layout

1 ответ

Ещё вопросы

Конечно ... Просто используйте проценты.

Bipin Kumar Pal · Accepted Answer · 2013-12-17T02-18-00.000Z

Использовать медиа-запросы

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Спасибо за вашу помощь. Это не совсем то, что я хотел, но это начало.