Позвольте мне сначала показать вам визуализации. Если вы чувствуете, что это довольно хорошо, пожалуйста, обратитесь к коду реализации.
1. Фиксированное число на строку: убедитесь, что эстетика макета
.list li {ширина: 20%; дисплей: inline-block;*Display: inline;*Zoom: 1; переполнение: скрыто;}2. Отрегулируйте номер и размер в соответствии с шириной страницы: убедитесь, что читаемость изображений и текстов
.list li {ширина: 20%; дисплей: inline-block;*Display: inline;*Zoom: 1; переполнение: скрыто;}1. Ширина управления медиа -запросами
@Media Screen и (MAX-WIDTH: 1280PX) {.Удобно, но совместимо
2. JS Control
$ (window) .resize (function () {resizelist ();}) function resizelist () {var s_width = $ (window) .width (); // console.log ("s_width:"+s_width); if (s_width> 600 && s_width <= 1280) li "). css (" width "," 25%");} else if (s_width> 400 && s_width <= 600) {$ (".. Список-table1 li "). CSS (" Width "," 33,3%");} else If (s_width> 200 && s_width <= 400) {$ (s_width> 200 && s_width <= 400) li "). css (" width "," 50%");} else if (s_width <= 200) {$ (".Примечания:
1. картина не деформируется
.a-common {width: auto; height: auto;}. a-common img {width: 100%; высота: auto;}2. Обработка перелива текста
.title, .subtitle {width: Auto; Text-align: Center; переполнение: скрыто; белое пространство: nowrap; text-overflow: ellipsis;}Выше приведено отзывчивый макет списка реализации JS, представленный редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!