CSS કન્ટેનર ક્વેરી યુનિટ્સ: રિસ્પોન્સિવ ડિઝાઇન માટે એલિમેન્ટ-રિલેટિવ સાઇઝિંગ માટેની માર્ગદર્શિકા

રિસ્પોન્સિવ વેબ ડિઝાઇનમાં વર્ષોથી નોંધપાત્ર વિકાસ થયો છે. જ્યારે વ્યૂપોર્ટ સાઇઝ પર આધારિત મીડિયા ક્વેરીઝ એક મુખ્ય આધારસ્તંભ છે, ત્યારે CSS કન્ટેનર ક્વેરીઝ વધુ દાણાદાર અને કમ્પોનન્ટ-કેન્દ્રિત અભિગમ પ્રદાન કરે છે. કન્ટેનર ક્વેરીઝ સમગ્ર વ્યૂપોર્ટને બદલે સમાવનાર એલિમેન્ટના કદના આધારે સ્ટાઇલ લાગુ કરવાની મંજૂરી આપે છે. કન્ટેનર ક્વેરીઝની અંદર, કન્ટેનર ક્વેરી યુનિટ્સ આ દાણાદારપણાને વધુ આગળ લઈ જાય છે, જે તમને તેમના કન્ટેનરના સંબંધમાં એલિમેન્ટ્સનું કદ નક્કી કરવાની મંજૂરી આપે છે.

કન્ટેનર ક્વેરી યુનિટ્સ શું છે?

કન્ટેનર ક્વેરી યુનિટ્સ (CQ Units) એ CSS યુનિટ્સનો સમૂહ છે જે કન્ટેનર એલિમેન્ટના કદની ટકાવારી દર્શાવે છે. આ યુનિટ્સ એવા કમ્પોનન્ટ્સ બનાવવાની એક શક્તિશાળી રીત પ્રદાન કરે છે જે સમગ્ર વ્યૂપોર્ટ સાઇઝને ધ્યાનમાં લીધા વિના, જુદા જુદા કન્ટેનર સાઇઝને સરળતાથી અનુકૂળ થાય છે. એક નેવિગેશન મેનૂ વિશે વિચારો જે સાઇડબારમાં ઉપલબ્ધ જગ્યાના આધારે તેના લેઆઉટને અનુકૂળ કરે છે, અથવા એક પ્રોડક્ટ કાર્ડ જે ગ્રિડ લેઆઉટમાં તેના કન્ટેનરની પહોળાઈના આધારે તેના ફોન્ટ સાઇઝ અને ઇમેજ સાઇઝને સમાયોજિત કરે છે. CQ યુનિટ્સ આ પ્રકારની અનુકૂલનશીલ ડિઝાઇનને અમલમાં મૂકવાનું નોંધપાત્ર રીતે સરળ બનાવે છે.

વ્યૂપોર્ટ યુનિટ્સ (vw, vh, vmin, vmax) થી વિપરીત, જે વ્યૂપોર્ટના સંબંધમાં હોય છે, કન્ટેનર ક્વેરી યુનિટ્સ ક્વેરી કન્ટેનરના સંબંધમાં હોય છે. આનો અર્થ એ છે કે એક જ કમ્પોનન્ટ તમારી એપ્લિકેશનના જુદા જુદા ભાગોમાં જુદી જુદી રીતે રેન્ડર થઈ શકે છે, જે દરેક કન્ટેનરની ચોક્કસ મર્યાદાઓને અનુકૂળ બને છે.

મુખ્ય કન્ટેનર ક્વેરી યુનિટ્સ

ત્યાં છ પ્રાથમિક કન્ટેનર ક્વેરી યુનિટ્સ છે, જે વ્યૂપોર્ટ યુનિટ્સના વર્તનને પ્રતિબિંબિત કરે છે:

• cqw: ક્વેરી કન્ટેનરની પહોળાઈનો 1%.
• cqh: ક્વેરી કન્ટેનરની ઊંચાઈનો 1%.
• cqi: ક્વેરી કન્ટેનરની ઇનલાઇન સાઇઝનો 1%. ઇનલાઇન સાઇઝ હોરિઝોન્ટલ રાઇટિંગ મોડ્સ (જેમ કે અંગ્રેજી)માં પહોળાઈ સાથે અને વર્ટિકલ રાઇટિંગ મોડ્સ (જેમ કે પરંપરાગત મોંગોલિયન)માં ઊંચાઈ સાથે મેપ થાય છે.
• cqb: ક્વેરી કન્ટેનરની બ્લોક સાઇઝનો 1%. બ્લોક સાઇઝ હોરિઝોન્ટલ રાઇટિંગ મોડ્સમાં ઊંચાઈ સાથે અને વર્ટિકલ રાઇટિંગ મોડ્સમાં પહોળાઈ સાથે મેપ થાય છે.
• cqmin: ક્વેરી કન્ટેનરના નાના પરિમાણ (ઇનલાઇન સાઇઝ અથવા બ્લોક સાઇઝ)નો 1%.
• cqmax: ક્વેરી કન્ટેનરના મોટા પરિમાણ (ઇનલાઇન સાઇઝ અથવા બ્લોક સાઇઝ)નો 1%.

cqw/cqh અને cqi/cqb વચ્ચેનો તફાવત સમજવો મહત્વપૂર્ણ છે, ખાસ કરીને આંતરરાષ્ટ્રીયકરણ (i18n) અને સ્થાનિકીકરણ (l10n) સાથે કામ કરતી વખતે કારણ કે રાઇટિંગ મોડ્સ આ યુનિટ્સ જે ભૌતિક પરિમાણોનો ઉલ્લેખ કરે છે તેને અસર કરી શકે છે. cqi અને cqb વધુ તાર્કિક બનવા માટે ડિઝાઇન કરવામાં આવ્યા છે, જે દસ્તાવેજ અથવા કન્ટેનરના રાઇટિંગ મોડનું સન્માન કરે છે.

કન્ટેનર ક્વેરીઝ સેટ કરવી

તમે કન્ટેનર ક્વેરી યુનિટ્સનો ઉપયોગ કરી શકો તે પહેલાં, તમારે એક એલિમેન્ટને ક્વેરી કન્ટેનર તરીકે નિયુક્ત કરવાની જરૂર છે. આ container-type CSS પ્રોપર્ટીનો ઉપયોગ કરીને કરવામાં આવે છે.

container-type માટે બે મુખ્ય વેલ્યુઝ છે:

• size: કન્ટેનર એક ક્વેરી કન્ટેનર જનરેટ કરે છે અને ઇનલાઇન અને બ્લોક પરિમાણોના આધારે કન્ટેનર સાઇઝની ગણતરી કરે છે. CQ યુનિટ્સનો ઉપયોગ કરવા માટે આ સૌથી સામાન્ય વેલ્યુ છે.
• inline-size: કન્ટેનર એક ક્વેરી કન્ટેનર જનરેટ કરે છે, પરંતુ ફક્ત ઇનલાઇન સાઇઝનો ઉપયોગ ક્વેરીઝ માટે થાય છે. જ્યારે તમે ફક્ત હોરિઝોન્ટલ રાઇટિંગ મોડ્સમાં પહોળાઈની કાળજી લેતા હો ત્યારે ઉપયોગી છે.

તમે container-type અને container-name (જે તમને ચોક્કસ કન્ટેનરને ટાર્ગેટ કરવાની મંજૂરી આપે છે) બંનેને સેટ કરવા માટે શોર્ટહેન્ડ પ્રોપર્ટી container નો પણ ઉપયોગ કરી શકો છો:

            .container {
  container: my-container size;
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, અમે "my-container" નામનું એક ક્વેરી કન્ટેનર બનાવ્યું છે. પછી તમે તમારા CSS માં @container at-rule નો ઉપયોગ કરીને આ કન્ટેનરને ટાર્ગેટ કરી શકો છો:

            @container my-container (min-width: 300px) {
  /* Styles to apply when the container's width is at least 300px */
}

            

              
                Copy
              
            
          

કન્ટેનર ક્વેરી યુનિટ્સના વ્યવહારુ ઉદાહરણો

ચાલો કેટલાક વ્યવહારુ દૃશ્યોનું અન્વેષણ કરીએ જ્યાં કન્ટેનર ક્વેરી યુનિટ્સ તમારા રિસ્પોન્સિવ ડિઝાઇન વર્કફ્લોમાં નોંધપાત્ર સુધારો કરી શકે છે.

ઉદાહરણ 1: અનુકૂલનશીલ પ્રોડક્ટ કાર્ડ

એક પ્રોડક્ટ કાર્ડની કલ્પના કરો કે જેને ઉપલબ્ધ જગ્યાના આધારે તેના લેઆઉટને સમાયોજિત કરવાની જરૂર છે. અમે ફોન્ટ સાઇઝ અને ઇમેજ સાઇઝને કન્ટેનરની પહોળાઈના પ્રમાણમાં સ્કેલ કરવા માંગીએ છીએ.

            .product-card {
  container-type: size;
  width: 100%;
  border: 1px solid #ccc;
  padding: 16px;
}

.product-card img {
  width: 40cqw; /* 40% of the container's width */
  height: auto;
}

.product-card h2 {
  font-size: 5cqw; /* 5% of the container's width */
  margin-bottom: 8px;
}

.product-card p {
  font-size: 3cqw; /* 3% of the container's width */
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, ઇમેજની પહોળાઈ, હેડિંગ ફોન્ટ સાઇઝ અને પેરેગ્રાફ ફોન્ટ સાઇઝ બધું cqw નો ઉપયોગ કરીને વ્યાખ્યાયિત કરવામાં આવ્યું છે. જેમ જેમ પ્રોડક્ટ કાર્ડના કન્ટેનરનું કદ બદલાશે, તેમ તેમ આ તત્વો પ્રમાણસર સ્કેલ થશે, જે એક સુસંગત દ્રશ્ય દેખાવ જાળવી રાખશે.

વૈશ્વિક પ્રાસંગિકતા: આ ઉદાહરણ સાર્વત્રિક રીતે લાગુ પડે છે કારણ કે વિશ્વભરના ઈ-કોમર્સ પ્લેટફોર્મ પર પ્રોડક્ટ કાર્ડ્સ એક સામાન્ય તત્વ છે. ભલે તમે ઉત્તર અમેરિકા, યુરોપ, એશિયા કે આફ્રિકામાં માલ વેચતા હોવ, પ્રોડક્ટ કાર્ડ્સને રિસ્પોન્સિવ રીતે અનુકૂળ કરવું મહત્વપૂર્ણ છે.

ઉદાહરણ 2: ડાયનેમિક નેવિગેશન મેનૂ

એક નેવિગેશન મેનૂનો વિચાર કરો કે જેને તે મુખ્ય હેડરમાં છે કે નાની સાઇડબારમાં છે તેના આધારે તેના લેઆઉટને સમાયોજિત કરવાની જરૂર છે. અમે હોરિઝોન્ટલ અને વર્ટિકલ લેઆઉટ વચ્ચે સ્વિચ કરવા માટે કન્ટેનર ક્વેરીઝનો ઉપયોગ કરી શકીએ છીએ.

            .navigation {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap if needed */
  gap: 10px;
}

.navigation a {
  padding: 8px 12px;
  background-color: #f0f0f0;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  white-space: nowrap; /* Prevent text from wrapping */
}

@container (max-width: 400px) {
  .navigation {
    flex-direction: column;
    align-items: stretch;
  }

  .navigation a {
    display: block;
    text-align: center;
  }
}

            

              
                Copy
              
            
          

આ કિસ્સામાં, અમે max-width શરત સાથે કન્ટેનર ક્વેરીનો ઉપયોગ કરી રહ્યા છીએ. જ્યારે કન્ટેનરની પહોળાઈ 400px કરતાં ઓછી અથવા બરાબર હોય, ત્યારે નેવિગેશન મેનૂ વર્ટિકલ લેઆઉટમાં સ્વિચ થાય છે. નોંધ કરો કે અમે ફક્ત કન્ટેનરના ઇનલાઇન-સાઇઝની જ કાળજી રાખીએ છીએ, તેથી `container-type: inline-size;`

વૈશ્વિક પ્રાસંગિકતા: નેવિગેશન મેનૂ વેબસાઇટની ઉપયોગિતાનો મૂળભૂત ભાગ છે. રિસ્પોન્સિવ નેવિગેશનની જરૂરિયાત સાર્વત્રિક છે, લક્ષ્ય પ્રેક્ષકો અથવા ભૌગોલિક સ્થાનને ધ્યાનમાં લીધા વગર.

ઉદાહરણ 3: ડેટા ટેબલને અનુકૂળ બનાવવું

ડેટા ટેબલ્સને રિસ્પોન્સિવ બનાવવું મુશ્કેલ હોવા માટે કુખ્યાત છે. કન્ટેનર ક્વેરીઝ, CQ યુનિટ્સ સાથે મળીને, અમને વધુ લવચીક ટેબલ્સ બનાવવામાં મદદ કરી શકે છે જે નાના કન્ટેનરને અનુકૂળ બને છે.

            .data-table-container {
  container-type: size;
  overflow-x: auto; /* Enable horizontal scrolling on small screens */
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th, .data-table td {
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 3cqw; /* Adapt font size to container width */
  white-space: nowrap; /* Prevent line breaks */
}

@container (max-width: 600px) {
  .data-table th, .data-table td {
    font-size: 4cqw; /* Slightly larger font size on smaller containers */
  }
}

            

              
                Copy
              
            
          

અહીં, અમે ટેબલ સેલ્સની અંદર ફોન્ટ સાઇઝને સ્કેલ કરવા માટે cqw નો ઉપયોગ કરી રહ્યા છીએ. અમે નાના સ્ક્રીન પર ટેબલ ઉપયોગી રહે તે માટે `overflow-x: auto` નો ઉપયોગ કરીને કન્ટેનર પર હોરિઝોન્ટલ સ્ક્રોલિંગ પણ સક્ષમ કરીએ છીએ. કન્ટેનર ક્વેરી સાંકડા કન્ટેનરમાં વધુ સારી વાંચનીયતા માટે ફોન્ટ સાઇઝને સહેજ સમાયોજિત કરે છે.

વૈશ્વિક પ્રાસંગિકતા: ડેટા ટેબલ્સનો ઉપયોગ વિશ્વભરમાં નાણા, આરોગ્ય, શિક્ષણ અને લોજિસ્ટિક્સ જેવા વિવિધ ઉદ્યોગોમાં વ્યાપકપણે થાય છે. એક રિસ્પોન્સિવ ડેટા ટેબલ ખાતરી કરે છે કે મહત્વપૂર્ણ માહિતી જુદા જુદા ઉપકરણો અને સ્ક્રીન સાઇઝ પર સુલભ છે, જે વૈશ્વિક પ્રેક્ષકો માટે નિર્ણાયક છે.

ઉદાહરણ 4: સુસંગત પ્રમાણ માટે cqmin અને cqmax નો ઉપયોગ

ધારો કે તમે કન્ટેનરની અંદર એક ચોરસ એલિમેન્ટ બનાવવા માંગો છો, જ્યાં બાજુની લંબાઈ હંમેશા કન્ટેનરના નાના પરિમાણની ટકાવારી હોય.

            .square-container {
  container-type: size;
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

.square {
  width: 30cqmin; /* 30% of the smaller dimension */
  height: 30cqmin; /* 30% of the smaller dimension */
  background-color: lightblue;
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, .square એલિમેન્ટ હંમેશા એક ચોરસ રહેશે, અને તેની બાજુની લંબાઈ .square-container ના નાના પરિમાણ (આ કિસ્સામાં, ઊંચાઈ) ના 30% હશે. જો કન્ટેનરની પહોળાઈ તેની ઊંચાઈ કરતાં નાની હોત, તો ચોરસની બાજુની લંબાઈ પહોળાઈ પર આધારિત હોત. આ ખાસ કરીને રિસ્પોન્સિવ રીતે એસ્પેક્ટ રેશિયો જાળવવા માટે ઉપયોગી છે.

વૈશ્વિક પ્રાસંગિકતા: એસ્પેક્ટ રેશિયો જાળવવું લોગો, પ્રોફાઇલ ચિત્રો અથવા ચિહ્નો જેવા વિવિધ દ્રશ્ય તત્વોમાં મહત્વપૂર્ણ છે. cqmin નો ઉપયોગ જુદા જુદા કન્ટેનરમાં સુસંગતતા સુનિશ્ચિત કરે છે, જે વિશ્વભરના વપરાશકર્તાઓ માટે એક સુસંગત બ્રાન્ડ અનુભવ માટે મહત્વપૂર્ણ છે.

બ્રાઉઝર સપોર્ટ અને પોલીફિલ્સ

2023 ના અંત સુધીમાં, ક્રોમ, ફાયરફોક્સ, સફારી અને એજ જેવા આધુનિક બ્રાઉઝર્સમાં કન્ટેનર ક્વેરીઝ અને કન્ટેનર ક્વેરી યુનિટ્સ માટે બ્રાઉઝર સપોર્ટ ઉત્તમ છે. જો કે, જો તમારે જૂના બ્રાઉઝર્સને સપોર્ટ કરવાની જરૂર હોય, तो તમે પોલીફિલનો ઉપયોગ કરવાનું વિચારી શકો છો. ઘણા પોલીફિલ્સ ઉપલબ્ધ છે જે જૂના બ્રાઉઝર્સમાં કન્ટેનર ક્વેરી કાર્યક્ષમતા લાવી શકે છે, જોકે પ્રદર્શન બદલાઈ શકે છે.

કન્ટેનર ક્વેરી યુનિટ્સના ઉપયોગના ફાયદા

• સુધારેલ કમ્પોનન્ટ પુનઃઉપયોગીતા: કમ્પોનન્ટ્સ વધુ આત્મનિર્ભર અને અનુકૂલનશીલ બને છે, કારણ કે તેમની સ્ટાઇલ તેમના કન્ટેનરના સંબંધમાં હોય છે, સમગ્ર વ્યૂપોર્ટના નહીં.
• વધુ દાણાદાર નિયંત્રણ: કન્ટેનર ક્વેરીઝ સ્ટાઇલિંગ પર વધુ ચોક્કસ નિયંત્રણ પ્રદાન કરે છે, જે તમને તેમના વ્યક્તિગત સંદર્ભના આધારે ચોક્કસ કમ્પોનન્ટ્સને ટાર્ગેટ કરવાની મંજૂરી આપે છે.
• સરળ રિસ્પોન્સિવ ડિઝાઇન: CQ યુનિટ્સ કન્ટેનરના કદના પ્રમાણમાં સ્કેલ થતી સ્ટાઇલ વ્યાખ્યાયિત કરવાની મંજૂરી આપીને જટિલ રિસ્પોન્સિવ લેઆઉટને સરળ બનાવે છે.
• ઉન્નત કોડ જાળવણી: કમ્પોનન્ટ-આધારિત સ્ટાઇલિંગ તમારા CSS ને વધુ સંગઠિત અને જાળવવામાં સરળ બનાવે છે.
• વધુ સારું પ્રદર્શન: કેટલાક કિસ્સાઓમાં, કન્ટેનર ક્વેરીઝ જટિલ મીડિયા ક્વેરી સેટઅપની તુલનામાં વધુ સારું પ્રદર્શન તરફ દોરી શકે છે, કારણ કે બ્રાઉઝરને ફક્ત ચોક્કસ કન્ટેનર માટે જ ક્વેરીનું મૂલ્યાંકન કરવાની જરૂર છે, સમગ્ર વ્યૂપોર્ટ માટે નહીં.

પડકારો અને વિચારણાઓ

• બ્રાઉઝર સપોર્ટ: જ્યારે બ્રાઉઝર સપોર્ટ સારો છે, ત્યારે હંમેશા તમારી ડિઝાઇનને જુદા જુદા બ્રાઉઝર્સ અને ઉપકરણો પર સંપૂર્ણ રીતે પરીક્ષણ કરો, ખાસ કરીને જો તમારે જૂના સંસ્કરણોને સપોર્ટ કરવાની જરૂર હોય.
• પ્રદર્શન: કન્ટેનર ક્વેરીઝનો વધુ પડતો ઉપયોગ અથવા વધુ પડતી જટિલ ક્વેરીઝ બનાવવાથી સંભવિતપણે પ્રદર્શનને અસર થઈ શકે છે. કોઈપણ પ્રદર્શન અવરોધોને ઓળખવા માટે તમારા કોડનું પ્રોફાઇલ કરો.
• જટિલતા: કન્ટેનર ક્વેરીઝ તમારા CSS માં જટિલતા ઉમેરી શકે છે, ખાસ કરીને જ્યારે નેસ્ટેડ કન્ટેનર સાથે કામ કરતી વખતે. યોગ્ય આયોજન અને સંગઠન આવશ્યક છે.
• રાઇટિંગ મોડ્સને સમજવું: `cqw`/`cqh` અને `cqi`/`cqb` વચ્ચેનો તફાવત યાદ રાખો, ખાસ કરીને જ્યારે જુદા જુદા રાઇટિંગ મોડ્સનો ઉપયોગ કરતી બહુભાષી વેબસાઇટ્સ સાથે કામ કરતી વખતે.

કન્ટેનર ક્વેરી યુનિટ્સના ઉપયોગ માટે શ્રેષ્ઠ પ્રયાસો

• કમ્પોનન્ટ-આધારિત અભિગમથી પ્રારંભ કરો: તમારા UI ને પુનઃઉપયોગી કમ્પોનન્ટ્સના સંગ્રહ તરીકે ડિઝાઇન કરો.
• કન્ટેનર ક્વેરીઝનો ઓછો ઉપયોગ કરો: જો સરળ મીડિયા ક્વેરીઝ પૂરતી હોય તો કન્ટેનર ક્વેરીઝનો વધુ પડતો ઉપયોગ કરશો નહીં.
• ક્વેરીઝને કેન્દ્રિત રાખો: તમારી કન્ટેનર ક્વેરીઝને વિશિષ્ટ અને લક્ષિત રાખો.
• સંપૂર્ણ રીતે પરીક્ષણ કરો: તમારી ડિઝાઇનને જુદા જુદા બ્રાઉઝર્સ, ઉપકરણો અને કન્ટેનર સાઇઝ પર પરીક્ષણ કરો.
• તમારા કોડનું દસ્તાવેજીકરણ કરો: તમારી કન્ટેનર ક્વેરીઝ અને તેની પાછળના તર્કનું સ્પષ્ટપણે દસ્તાવેજીકરણ કરો.
• સુલભતાનો વિચાર કરો: ખાતરી કરો કે તમારી રિસ્પોન્સિવ ડિઝાઇન કન્ટેનરના કદને ધ્યાનમાં લીધા વિના, વિકલાંગ વપરાશકર્તાઓ માટે સુલભ છે.

નિષ્કર્ષ

CSS કન્ટેનર ક્વેરી યુનિટ્સ ખરેખર રિસ્પોન્સિવ ડિઝાઇન બનાવવાની એક શક્તિશાળી અને લવચીક રીત પ્રદાન કરે છે. તમને તેમના કન્ટેનરના સંબંધમાં એલિમેન્ટ્સને સ્ટાઇલ કરવાની મંજૂરી આપીને, CQ યુનિટ્સ તમને વધુ પુનઃઉપયોગી, જાળવી શકાય તેવા અને અનુકૂલનશીલ કમ્પોનન્ટ્સ બનાવવામાં સક્ષમ બનાવે છે. જ્યારે વિચારણા કરવા માટે કેટલાક પડકારો છે, ત્યારે કન્ટેનર ક્વેરીઝ અને CQ યુનિટ્સના ઉપયોગના ફાયદા ગેરફાયદા કરતાં ઘણા વધારે છે, ખાસ કરીને જટિલ અને કમ્પોનન્ટ-આધારિત વેબ એપ્લિકેશનો માટે. જેમ જેમ બ્રાઉઝર સપોર્ટ સુધરતો જશે, તેમ તેમ કન્ટેનર ક્વેરીઝ વિશ્વભરના ફ્રન્ટ-એન્ડ ડેવલપર્સ માટે એક આવશ્યક સાધન બનવા માટે તૈયાર છે. એલિમેન્ટ-રિલેટિવ સાઇઝિંગની શક્તિને અપનાવો અને તમારા પ્રોજેક્ટ્સ માટે રિસ્પોન્સિવ ડિઝાઇન ક્ષમતાઓના નવા સ્તરને અનલોક કરો.