اسمحوا لي أن أريكم العروض أولا. إذا شعرت أنه جيد جدًا ، فيرجى الرجوع إلى رمز التنفيذ.
1. الرقم الثابت لكل سطر: تأكد من جماليات التصميم
.list li {width: 20 ٪ ؛ display: inline block ؛*display: inline ؛*Zoom: 1 ؛ Overflow: Hidden ؛}2. اضبط الرقم والحجم وفقًا لعرض الصفحة: تأكد من قابلية قراءة الصور والنصوص
.list li {width: 20 ٪ ؛ display: inline block ؛*display: inline ؛*Zoom: 1 ؛ Overflow: Hidden ؛}1. عرض التحكم في استعلام الوسائط
media screen و (max-width: 1280px) {. list-table1 li {width: 25 ٪}}@media screen و (max-width: 600px) {. list-table1 li {width: 33.3 ٪}}@media screen و (max-width: 400px) {.مريحة ، ولكن متوافقة
2
$ (window) .resize (function () {resizelist () ؛}) resizelist () {var s_width = $ (window) .width () ؛ // console.log ( li "). li ").ملحوظات:
1. الصورة لا تشوه
.a-common {width: auto ؛ الارتفاع: auto ؛}.2. معالجة الفائض النص
.title ، .subtitle {width: auto ؛ text-align: center ؛ verflow: Hidden ؛ White-Space: nowrap ؛ text-overflow: ellipsis ؛}ما سبق هو التصميم المستجيب لقائمة تنفيذ JS التي قدمها المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!