લેખ ડિરેક્ટરી
મોબાઇલ રિસ્પોન્સિવ CSS વિવિધ રિઝોલ્યુશન અનુસાર વિવિધ @media સ્ક્રીન રિસ્પોન્સિવ લેઆઉટ કેવી રીતે પ્રદર્શિત કરે છે?
નીચેનો લેખ વિવિધ રીઝોલ્યુશન નક્કી કરવા અને અનુકૂલનશીલ પહોળાઈ પ્રાપ્ત કરવા માટે વિવિધ પહોળાઈના લેઆઉટને પ્રદર્શિત કરવા માટે CSS નો ઉપયોગ કેવી રીતે કરવો તે રજૂ કરશે.
જરૂરિયાતમંદ મિત્રો તેનો સંદર્ભ લઈ શકે છે, મને આશા છે કે તે દરેકને મદદરૂપ થશે.
@media અને @media સ્ક્રીન પ્રિન્ટીંગ વેબ પેજીસ વચ્ચેનો તફાવત
- જો સીએસએસને પ્રિન્ટીંગ ઉપકરણમાં વાપરવાની જરૂર હોય, તો @mediaનો ઉપયોગ કરો, અન્યથા @media સ્ક્રીનનો ઉપયોગ કરો.
- જો કે, આ જરૂરી નથી કે તે સાચું હોય. વાસ્તવમાં, જો તમે "સ્ક્રીન" ને "પ્રિન્ટ" વડે બદલો અને તેને @media પ્રિન્ટ તરીકે લખો, તો પ્રિન્ટિંગ ઉપકરણ પર CSS નો ઉપયોગ કરી શકાય છે;
- પરંતુ નોંધ લો કે @media પ્રિન્ટ દ્વારા જાહેર કરાયેલ css માત્ર પ્રિન્ટીંગ ઉપકરણો પર જ માન્ય છે.
1. DIVCSS નાનું કેસ વર્ણન
અમે પહેલા ".abc" નામનું DIV બોક્સ CSS સેટ કર્યું, તેની ઊંચાઈ 300px પર સેટ કરી અને CSS બોર્ડરને બ્લેક પર સેટ કરીએ;
- અને સેટિંગ્સ
margin:0 autoલેઆઉટ કેન્દ્રિત છે, અને આ બે શૈલીઓ સરળ જોવા માટે પૂર્વ-સેટ છે.
પહોળાઈ દર્શાવવા માટે અમે બ્રાઉઝરને જાતે જ ખેંચીએ છીએ અને પછી અવલોકન કરીએ છીએ કે બૉક્સની પહોળાઈ કેવી રીતે બદલાય છે:
- જ્યારે બ્રાઉઝરની પહોળાઈ 500px કરતાં વધુ ન હોય તેવી પહોળાઈમાં ગોઠવવામાં આવે છે, ત્યારે બૉક્સની પહોળાઈને અનુરૂપ 100px પ્રદર્શિત થાય છે;
- જ્યારે બ્રાઉઝરની પહોળાઈને 901px કરતા ઓછી કરવા માટે ગોઠવવામાં આવે છે, ત્યારે ".abc" બોક્સની પહોળાઈને અનુરૂપ પ્રદર્શિત થાય છે, જે 200px દર્શાવે છે;
- જ્યારે બ્રાઉઝરની પહોળાઈ 1201px કરતાં વધારે હોય ત્યારે ગોઠવવામાં આવે છે, ત્યારે બૉક્સ ઑબ્જેક્ટની પહોળાઈ 1200px દર્શાવે છે;
- જ્યારે તે 1200px કરતાં ઓછું હોય, ત્યારે ડિસ્પ્લેની પહોળાઈ 900px હોય છે.
2, CSS મોબાઇલ ફોન મોબાઇલ ટર્મિનલ અનુકૂલનશીલ કોડ
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- એ નોંધવું જોઈએ કે સીએસએસ કોડ ઓર્ડર મોટાથી નાના સુધી સીએસએસને ટાઈપસેટિંગ કરવાનો છે (અનુમાનવું કે બ્રાઉઝરની પહોળાઈ જેટલી મોટી છે, આગળનો ભાગ વધારે છે).
- આ તાર્કિક સંબંધને કારણે છે, CSS ડિબગીંગના @mediaના ચુકાદાને કારણે નિર્ણય નિષ્ફળ જશે.
3. HTML કોડ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>નોંધ: ઉપકરણ-પાસા-ગુણોત્તર
- ઉપકરણ-પાસા-ગુણોત્તરનો ઉપયોગ વિશિષ્ટ સ્ક્રીન પાસા રેશિયો સાથે ઉપકરણોને ફિટ કરવા માટે કરી શકાય છે, જે એક ઉપયોગી ગુણધર્મ પણ છે.
- ઉદાહરણ તરીકે, અમારું પૃષ્ઠ 4:3 ના પાસા રેશિયો સાથે સામાન્ય સ્ક્રીન માટે શૈલીને વ્યાખ્યાયિત કરવા માંગે છે.
- પછી 16:9 અને 16:10 વાઈડસ્ક્રીન માટે, અન્ય શૈલીને વ્યાખ્યાયિત કરો, જેમ કે અનુકૂલનશીલ પહોળાઈ અને નિશ્ચિત પહોળાઈ:
- @media માત્ર સ્ક્રીન અને (ઉપકરણ-પાસા-ગુણોત્તર:4/3)
4. મુખ્ય બ્રાઉઝર્સ HTML+CSS+JS સ્ત્રોત કોડ સાથે સુસંગત
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>ઉપરોક્ત મોબાઇલ ટર્મિનલ અનુકૂલનશીલ CSS છે, જે વિવિધ સ્ક્રીનો અનુસાર વિવિધ @media સ્ક્રીન રિસ્પોન્સિવ વિગતવાર સામગ્રી દર્શાવે છે.
હોપ ચેન વેઇલિયાંગ બ્લોગ ( https://www.chenweiliang.com/ ) "મોબાઇલ એડપ્ટીવ CSS ડિફરન્ટ સ્ક્રીન ડિફરન્ટ @media સ્ક્રીન રિસ્પોન્સિવનેસ દર્શાવે છે", જે તમને મદદરૂપ છે.
આ લેખની લિંક શેર કરવા માટે આપનું સ્વાગત છે:https://www.chenweiliang.com/cwl-2074.html
નવીનતમ અપડેટ્સ મેળવવા માટે ચેન વેઇલિઆંગના બ્લોગની ટેલિગ્રામ ચેનલ પર આપનું સ્વાગત છે!
📚 આ માર્ગદર્શિકામાં ઘણું મૂલ્ય છે, 🌟આ એક દુર્લભ તક છે, તેને ચૂકશો નહીં! ⏰⌛💨
ગમે તો શેર કરો અને લાઈક કરો!
તમારી શેરિંગ અને લાઈક્સ એ અમારી સતત પ્રેરણા છે!