آرٽيڪل ڊاريڪٽري
موبائل انٽرنيٽ جي تيزي سان ترقي ۽ وي چيٽ مارڪيٽنگ جي وسيع استعمال سان، موبائل فون زندگي ۾ هڪ ضروري اوزار بڻجي ويا آهن .
ويب سائيٽ ٽيمپليٽس لاءِ ، اسان ورڈپریس ريسپانسيو ٿيمز استعمال ڪرڻ جي صلاح ڏيون ٿا:
- جيڪڏهن ورڈپریس تھیم ڊولپر HTML 5 تصوير کي موافقت واري اسڪرين نه ٺاهي آهي جڏهن ورڈپریس تھیم پيج کي ڊزائين ڪندي ...
- موبائيل ڊيوائس تي ويب سائيٽ کي براؤز ڪندي، اتي هڪ تمام بدصورت تصوير جي بي ترتيبي هوندي، ۽ صارف جو تجربو انتهائي ناقص آهي!
CSS تصوير adaptive جو مطلب ڇا آھي؟
CSS تصويري خود موافقت جو مطلب آهي html ويب پيج ۾ تصويرون ٺاهڻ، CSS ڪوڊ ذريعي:
- خودڪار طور تي مختلف ڊوائيسز جي چوٽي ۽ اوچائي کي ترتيب ڏيو.
- img ٽيگ خودڪار طريقي سان اسڪيل ڪيو ويو آهي.
اڳيون، چن ويليانگ توهان سان تصوير جي سائيز کي متناسب طور تي وڌائڻ لاءِ CSS ڪوڊ شيئر ڪندو. ^_^
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 تصوير جي سائيز کي تبديل ڪرڻ لاءِ ڪوڊ اسڪرين سائيز ۽ متناسب سائيز کي ترتيب ڏيڻ لاءِ" توهان لاءِ مددگار ثابت ٿيندو.
هن مضمون جي لنڪ شيئر ڪرڻ لاءِ آزاد محسوس ڪريو: https://www.chenweiliang.com/cwl-964.html