ให้ฉันแสดงการเรนเดอร์ก่อน หากคุณรู้สึกว่ามันค่อนข้างดีโปรดดูรหัสการใช้งาน
1. หมายเลขคงที่ต่อบรรทัด: ตรวจสอบความสวยงามของเค้าโครง
.List li {width: 20%; แสดง: inline-block;*แสดง: inline;*zoom: 1; overflow: hidden;}2. ปรับจำนวนและขนาดตามความกว้างของหน้า: ตรวจสอบให้แน่ใจว่าสามารถอ่านรูปภาพและข้อความได้
.List li {width: 20%; แสดง: inline-block;*แสดง: inline;*zoom: 1; overflow: hidden;}1. ความกว้างการควบคุมแบบสอบถามสื่อ
หน้าจอ @media และ (สูงสุด-ความกว้าง: 1280px) {. list-table1 li {width: 25%}}@media screen และ (Max-Width: 600px) {. list-table1 li {width: 33.3%}}@media screen และ (max-width: 400px) {.สะดวก แต่เข้ากันได้
2. การควบคุม JS
$ (window) .resize (function () {resizelist ();}) ฟังก์ชั่น resizelist () {var s_width = $ (หน้าต่าง) .width (); // console.log ("s_width:"+s_width); ถ้า (s_width> 600 && li "). css (" ความกว้าง "," 25%");} ถ้า (s_width> 400 && s_width <= 600) {$ (". list-table1 li "). css (" width "," 33.3%"); li "). CSS (" ความกว้าง "," 50%");} ถ้า (s_width <= 200) {$ (". list-table1 li "). css (" ความกว้าง "," 100%");}} $ (หน้าต่าง).หมายเหตุ:
1. ภาพไม่เปลี่ยนรูป
.a-common {width: auto; ความสูง: auto;}. a-common img {width: 100%; ความสูง: auto;}2. การประมวลผลข้อความล้น
.title, .subtitle {width: auto; text-allign: center; overflow: hidden; white-space: nowrap; text-overflow: Ellipsis;}ข้างต้นเป็นเค้าโครงที่ตอบสนองของรายการการใช้งาน JS ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!