آرٽيڪل ڊاريڪٽري
تيز رفتار موبائل انٽرنيٽ جي ڪري،Wechat مارڪيٽنگموبائل فون جي مقبوليت ٿي چڪي آهيزندگيلازمي اوزار.
هڪ ويب سائيٽ ٺاهيوtemplate، ان کي استعمال ڪرڻ جي صلاح ڏني آهيWordPressلاء موافقت وارو موضوع:
- جيڪڏهن ورڈپریس تھیم ڊولپر HTML 5 تصوير کي موافقت واري اسڪرين نه ٺاهي آهي جڏهن ورڈپریس تھیم پيج کي ڊزائين ڪندي ...
- موبائيل ڊيوائس تي ويب سائيٽ کي براؤز ڪندي، اتي هڪ تمام بدصورت تصوير جي بي ترتيبي هوندي، ۽ صارف جو تجربو انتهائي ناقص آهي!
CSS تصوير adaptive جو مطلب ڇا آھي؟
CSS تصويري خود موافقت جو مطلب آهي html ويب پيج ۾ تصويرون ٺاهڻ، CSS ڪوڊ ذريعي:
- خودڪار طور تي مختلف ڊوائيسز جي چوٽي ۽ اوچائي کي ترتيب ڏيو.
- img ٽيگ خودڪار طريقي سان اسڪيل ڪيو ويو آهي.
اڳيونچن ويلانگمان توهان سان شيئر ڪندس CSS img متناسب اسڪيلنگ ڪوڊ ^_^
CSS تصوير جي اوچائي ۽ چوٽي موافقت وارو ڪوڊ
html ۾ تصوير داخل ڪريو:
جيڪڏھن توھان چاھيو ٿا ته تصوير کي ويڪر ۽ اوچائي ۾ مقرر رھڻ بدران اسڪرين جي ننڍڙي سائيز مطابق ٺاھيو وڃي.
توھان ھيٺ ڏنل ڪوڊ شامل ڪري سگھو ٿا پنھنجي WordPress موضوع جي style.css فائل ۾ ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }بيان هتيmax-widthوڌ ۾ وڌ ويڪر جو ضابطو
- انهي کي يقيني بڻائڻ ته سڀئي تصويرون وڌ ۾ وڌ 100٪ تي ڏيکاريل آهن (يعني اهي صرف انهن جي پنهنجي تصويرن جيتري وڏي ڏيکاري سگهجن ٿيون).
- هن نقطي تي، جيڪڏهن تصوير تي مشتمل عنصر (مثال طور، جسم يا div جنهن ۾ تصوير شامل آهي) تصوير جي موروثي ويڪر کان ننڍو آهي، تصوير کي وڌ ۾ وڌ دستياب جاء ڀرڻ لاء اسڪيل ڪيو ويندو.
width:auto;مطلب ته خودڪار ويڪر
\9 هي هيڪ سي ايس ايس لکڻ جو هڪ طريقو آهي.
- اهڙي طرح، "\9" کي عام سي ايس ايس ڪوڊ ۾ شامل ڪيو ويو آهي، صرف IE برائوزر ان کي سڃاڻي سگهي ٿو، ٻيا برائوزر هن بيان کي نظر انداز ڪندا.
- هي براؤزر جي فرق کي حاصل ڪندو، مطابقت رکندڙ برائوزرن جي مقصد کي چالو ڪندي.
ڇو نه استعمال ڪريو ويڪر: 100٪؟
تصويرن جي خودڪار اسڪيلنگ حاصل ڪرڻ لاء، توھان پڻ استعمال ڪري سگھو ٿا وڌيڪ عام طور تي استعمال ٿيل چوٽي ملڪيت، مثال طور.width：100％.
بهرحال، هي قاعدو هتي لاڳو نٿو ٿئي.
- ڇاڪاڻ ته هي قاعدو ان کي ظاهر ڪندو ان جي ڪنٽينر وانگر وسيع.
- حالتن ۾ جتي ڪنٽينر تصوير کان تمام گهڻو وسيع آهي، تصوير کي غير ضروري طور وڌايو ويندو.
احتياط
سي ايس ايس چونڊيندڙ ڇا آهن؟ ڪلاس ۽ id جي وچ ۾ ڇا فرق آهي؟هيٺيان سبق ▼ بابت ڳالهائي رهيا آهن
موبائيل ويب سائيٽ ڪيئن پيج تي ايم پي 4 وڊيو ايڊاپٽيو کيڏي ٿي؟مھرباني ڪري ھيٺ ڏنل لنڪ تي ڪلڪ ڪريو ▼
اميد چن ويلانگ بلاگ ( https://www.chenweiliang.com/ "ويب پيج HTML 5 تصويري موافقت واري اسڪرين img متناسب اسڪيلنگ ڪوڊ" شيئر ڪيو، جيڪو توهان لاءِ مددگار آهي.
هن آرٽيڪل جي لنڪ کي حصيداري ڪرڻ لاء ڀليڪار:https://www.chenweiliang.com/cwl-964.html
تازن تازه ڪاريون حاصل ڪرڻ لاءِ Chen Weiliang جي بلاگ جي ٽيليگرام چينل تي ڀليڪار!
📚 هي گائيڊ وڏي قيمت تي مشتمل آهي، 🌟 هي هڪ نادر موقعو آهي، ان کي نه وڃايو! ⏰⌛💨
پسند اچي ته شيئر ڪريو ۽ پسند ڪريو!
توهان جي حصيداري ۽ پسند اسان جي مسلسل حوصلا آهن!