CSS පාඩම් අංක 09
වෙබ් එක Tab එකකට හරි Phone එකකට හරි හදනවා නම්?
අද වෙනකොට මිනිස්සු Computer වලින් වගේම Tab, Mobile Phonesවලිනුත් Internet එකට පිවිසෙනවා. ඔයාලා දැකලා ඇති එකම වෙබ් එක වුණත් Computer එකෙන්, Tab එකෙන් සහ Mobile Phone එකෙන් බැලුවම ආකෘති 3කට පෙන්නන අවස්ථා. Computer එකෙන් බැලුවම පේන එක නෙවේ, Tab එකෙන් බැලුවොත් පෙන්නන්නේ. Tab එකෙන් බැලුවොත් පේන එක නෙවේ Phone එකකින් බැලුවොත් පෙන්නන්නේ. මේකට තමයි Responsive කරනවා කියලා කියන්නේ. Computer එකක Screen එකේ පළල වැඩියි. Tab එකේ Screen එකේ පළල ඊට වඩා පොඩියි. Phone එකක Screen එක ඊටත් වඩා පොඩියි. ඒ නිසා තමයි ආකාර 3කට හදන්නේ.
එහෙම කළේ නැත්නම් Tab එකකින් හෝ Phone එකකින් වෙබ් එකට ගියොත් පෙන්නන්නේ Computer එකේ පෙන්නන විදිහටයි. ඒ Devicesවල Screen Width එක, Computer එකේ Screen Width එකට වඩා පොඩි නිසා වෙබ් එක බලා ගන්න බැරි තත්වයක් උදා වෙනවා. එක්කෝ වෙබ් එකේ පෙන්නන්නේ 1/4ක ප්රමාණයක්. එහෙමත් නැත්නම් වෙබ් එක පෙන්නන්නේ හෙනම හෙන චූටියට. එහෙමත් නැත්නම් වෙබ් එකේ ඔක්කොම Elements ටික එහාට මෙහාට පැනලා. වෙබ් එකක් මේ විදිහට Responsive කරන්න ඕන නම් හැම Element එකකම පළල (Width) දෙන්න ඕනි % වලින්. ඒක Responsive කරන වැඩේට ගොඩාක් උදව් වෙනවා.
බලන්න මේ උදාහරණය. මෙතන පෙන්නලා තියෙන්නේ එකම වෙබ් එකක, එකම වෙබ් පිටුව පිළිවෙලින් Computer, Tab, Mobile Phone කියන Devices තුනෙන් බලනකොට පෙන්නන විදිහ.
එහෙම කළේ නැත්නම් Tab එකකින් හෝ Phone එකකින් වෙබ් එකට ගියොත් පෙන්නන්නේ Computer එකේ පෙන්නන විදිහටයි. ඒ Devicesවල Screen Width එක, Computer එකේ Screen Width එකට වඩා පොඩි නිසා වෙබ් එක බලා ගන්න බැරි තත්වයක් උදා වෙනවා. එක්කෝ වෙබ් එකේ පෙන්නන්නේ 1/4ක ප්රමාණයක්. එහෙමත් නැත්නම් වෙබ් එක පෙන්නන්නේ හෙනම හෙන චූටියට. එහෙමත් නැත්නම් වෙබ් එකේ ඔක්කොම Elements ටික එහාට මෙහාට පැනලා. වෙබ් එකක් මේ විදිහට Responsive කරන්න ඕන නම් හැම Element එකකම පළල (Width) දෙන්න ඕනි % වලින්. ඒක Responsive කරන වැඩේට ගොඩාක් උදව් වෙනවා.
බලන්න මේ උදාහරණය. මෙතන පෙන්නලා තියෙන්නේ එකම වෙබ් එකක, එකම වෙබ් පිටුව පිළිවෙලින් Computer, Tab, Mobile Phone කියන Devices තුනෙන් බලනකොට පෙන්නන විදිහ.
මේ විදිහට කරන්නේ වෙබ් එක පරිශීලනය කරන අයගෙම පහසුව වෙනුවෙන් තමයි. නැත්නම් එයාලට වෙබ් එක හරියාකාරව බලන්න බැරි වෙනවා. ඒකෙන් වෙන්නේ වෙබ් එක බලන එක්කෙනාගේ ප්රධානතම අරමුණ වෙන දත්ත සහ තොරතුරු ලබා ගැනීම කියන එක අසාර්ථක වෙන එකයි. ඉතින් මෙහෙම එක එක Devicesවලට Responsive කරන කොටත් අපි ගොඩාක් සැළකිලිමත් වෙන්න ඕන. Usability කියන්නේ කතා කළ යුතුම මාතෘකාවක්. ඒ කියන්නේ වෙබ් එක බලන එක්කෙනා පාවිච්චි කරන Device එක අනුව ආකෘතිය හදන්න ඕන. Desktop Version එකේ දාන ලස්සන ලස්සන වැඩ කෑලි, Mobile Version එකට හරියන්නේ නැති වෙන්න පුලුවන්. එහෙනං එව්වා වහාම අයින් කරන්න ඕන. නැත්නම් බලන එක්කෙනාට, බලන්න අමාරුයි. ඒ වෙනුවට Mobile Version එකට ගැලපෙන Elements අපිට ආදේශ කරන්න පුලුවන්. උදාහරණයක් විදිහට Desktop Version එකක නම් Navigation එක විදිහට තියෙන්නේ දිග තීරුවක් (ගොඩක් වෙබ්වල). Mobile Version එකේදි ඒක Hamburger Icon එකක් කරන්න පුලුවන්.
Responsive කරන වැඩේදි @media කියන Code එක තමයි වැදගත් වෙන්නේ. අපි දන්නවා ගොඩාක් Companiesවලින් හදන ගොඩාක් Devicesවල Screen Width එක තියෙන්නේ එක එක ප්රමාණවලින්. හැම එකක්ම එකිනෙකට වඩා වෙනස්. ඉතින් මේ හැම එකකටම Code ලියන එක කරදර වැඩක්. ඒ නිසා ගොඩක් අය පෙළඹිලා තියෙනවා අලුතෙන් එන Productsවලටයි, අලුත් Product එක එන්න කලින් තිබ්බ පරණ Product එකටයි විතරක් Code ලියන්න. සමහරු ප්රධානතම Productsවලට විතරක් Code ලියනවා. තවත් සමහරු Desktop Version එකට Code ලියනකොට Margin සහ Padding හැකිතාක් අවම කරනවා. Margin, Padding නැති වෙනවා කියන්නේ ආයිත් අමුතුවෙන් Responsive කරන්න Code ලියන්න ඕන නෑ කියන එක. ඕනෑම Device එකකින් බැලුවොත්, ඒකෙ Screen Width එක අනුව, වෙබ් එක Auto Structure එක හදාගන්නවා.
අපි උදාහරණයක් විදිහට Tab Product එකක් සහ Phone Product එකක් අරගෙන බලමු. අපි ගමු Apple iPad එකයි, Apple iPhone 6 එකයි.
* Apple iPad එකේ Screen එක = 1024 x 768
* Apple iPhone 6 එකේ Screen එක = 375 x 667
එතකොට Responsive කරන වැඩේදි අපිට උස වැදගත් වෙන්නේ නෑ. උස වැඩි නම් උඩට පහළට Scroll කරන්න පුලුවන්නේ. ඒ නිසා අපිට වැදගත් වෙන්නේ Width එක විතරයි. ඒ කියන්නේ මේ උදාහරණය අනුව නම් Apple iPad එකේ 1024px Width එක සහ Apple iPhone6 එකේ 375px Width එක.
Responsive කරනකොට නිතරම පාවිච්චි වෙන Properties කිහිපයක් තියෙනවා. අපි එයින් ටිකක් ඉගෙන ගමු. {max-width} කියන්නේ උපරිම පළල. {min-width} කියන්නේ අවම පළල. තව තියෙනවා Property එකක් {display} කියලා. Responsive කරන කර්තව්යයේදී මේකට Block සහ None කියන Values දෙක දෙන්න පුලුවන්. None කියන Value එක ඕන Property එකකට ඔට්ටුයි. ඕන Property එකකට None කියලා දීපු හැටියේ ඒ Property එක වැඩ කරන්නේ නැතුව යනවා. එතකොට Display Property එකට None දුන්නොත්, අදාළ Element එක Display වෙන්නේ (පෙන්නන්නේ) නැතුව යනවා.
දැන් එහෙනං වැඩේ පටන් ගමු. Responsive කරනකොට ලියන Code එකේ Structure එක එන්නේ මෙහෙමයි.
@media only screen and (max-width: ) and (min-width: ) { }
@media only screen and කියලා දෙන්න ඕන. ඊට පස්සේ Max Width එක සහ Min Width එක ලියනවා. ඒ කියන්නෙ උපරිම සහ අවම පළල. ඊට පස්සේ සගල වරහන් දෙකක් දාලා, ඒ සගල වරහන් දෙක ඇතුළේ තමයි Code ලියන්න ගන්නේ. එතකොට ඒ ලියන Codes වලංගු වෙන්නේ අපි Set කරන ඒ පරාසයට විතරයි. ඒ කියන්නේ අපි Set කරපු උපරිම සහ අවම පළලේ අගය දශමයකින් හරි පැන්නුවොත්, ඒක වැඩ කරන්නේ නෑ.
Max Width එකට දෙන්න ඕන Device එකේ Width එක. Min Width එකට දෙන්න ඕන අපි Responsive කරන ඊළග Device එකේ Width එක. එහෙනං අනිවාර්යෙන්ම ඊළගට Responsive කරන Device එක, දැන් Responsive කරන Device එකේ පළලට වඩා කුඩා වෙන්න ඕන. ඊළගට Responsive කරන Device එකේ Max Width එකට දෙන්න ඕන ඒ Device එකේ Width එක. Min Width එකට දෙන්න ඕන ඊටත් පස්සේ Responsive කරන Device එකේ Width එක. එතකොට ඒ Device එක, මීටත් වඩා කුඩායි. එතකොට අපි ඉස්සෙල්ලා තෝර ගත්තු Tab එකටයි, Phone එකටයි ලියනවා නම් මෙහෙම තමයි ලියවෙන්න ඕන.
@media only screen and (max-width: 1024px) and (min-width:375px) { }
@media only screen and (max-width:375px) and (min-width: 1px) { }
Apple iPhone 6 එකෙන් පස්සේ Responsive කරන්න Device එකක් නැත්නම් Min Width කියන කොටස අවශ්ය නෑ. එහෙනං මෙහෙම තිබ්බම ඇති.
@media only screen and (max-width:375px) { }
දැන් අපි Responsive කරන එක, උදාහරණ දෙකකින් තේරුම් ගන්න බලමු. ඔන්න පළවෙනි උදාහරණය ! මුලින්ම තියෙන්නේ Desktop Version එක. ඊට පස්සේ තියෙන්නේ Tab එකකදි පෙන්නගන්න ඕන විදිහ. ඊටත් පස්සේ තියෙන්නේ Phone එකකදි පෙන්නගන්න ඕන විදිහ.
Desktop Version එකේදි පින්තූර 4 තියෙන්නේ එක පෙළකට. Tab Version එකේදි එක පේළියකට පින්තූර 2 ගාණේ, පේළි 2කට බෙදෙනවා. Mobile Version එකේදි පින්තූර 4ම තියෙන්නේ එක යට එක. එතකොට මෙතන තියෙන කතන්දරය අනුව අපිට Tab එකට සහ Phone එකට අලුතින් කොටස් දෙකක් නිර්මාණය කරන්න වෙනවා. මේ තියෙන්නේ Desktop Version එකේ Code එක.
HTML
<div id = "gallery"> <img class ="img" src = "a.jpg"> <img class ="img" src = "b.jpg"> <img class ="img" src = "c.jpg"> <img class ="img" src = "d.jpg"> </div> |
CSS
.img { width:25% } |
දැන් අපි Tab Version එකට Code එක හදනවා මෙන්න මෙහෙම !
HTML
<div id = "gallery2"> <img class ="img" src = "a.jpg"> <img class ="img" src = "b.jpg"> <br> <img class ="img" src = "c.jpg"> <img class ="img" src = "d.jpg"> </div> |
CSS
.img { width:25% } |
ඊට පස්සේ අපි Mobile Version එකට Code එක හදනවා මෙහෙම !
HTML
<div id = "gallery3"> <img class ="img" src = "a.jpg"> <br> <img class ="img" src = "b.jpg"> <br> <img class ="img" src = "c.jpg"> <br> <img class ="img" src = "d.jpg"> </div> |
CSS
.img { width:25% } |
එතකොට මෙතන අමුතුවෙන්ම කියලා හදලා තියෙන්නේ HTML Codes ටික තමයි. CSS එක එකමයි. ඒ නිසා ඒක මෙතනදි අවශ්ය වෙන්නේ නෑ. දැන් මේ Gallery2 සහ Gallery3 කියන කොටස් දෙක, Desktop Version එකේ Gallery කියන Div එක යටින් දාගන්න ඕන. එහෙම දැම්මම Desktop Version එකේදි, Gallery එකට අදාළ Divs 3ම (gallery, gallery2, gallery3) පෙන්නනවා. Tab එකට සහ Mobile වලට හදපු Gallery එක Desktop Version එකට අවශ්ය නෑනේ. ඒ නිසා අපිට පුලුවන් ඒවා හංගන්න. එහෙනං අපි CSS File එකේ, Desktop Version එකේ Codes ළග ලියනවා මෙන්න මෙහෙම.
#gallery2 {display:none;}
#gallery3 {display:none;}
ඒ කියන්නේ gallery2 සහ gallery3 කියන ID දෙක පෙන්නන්න එපා කියලා. එතකොට ඒ Codes පෙන්නන්නේ නෑ. ඔන්න දැන් ආයිත් Desktop Version එකේ පෙන්නන්නේ Desktop Version එකට හදපු Gallery එක විතරයි.
දැන් ලියනවා Tab Version (Apple iPad) එකට Media Query එක. මේ Media Queries ලියන්නේ Desktop Version එකට ලියපු Codes වලින් වෙන් කරලා, වෙනම තැනක. වෙනම CSS File එකක ලියනවා නම් තවත් හොදයි. එතකොට පැහැදිලියි.
@media only screen and (max-width: 1024px) and (min-width:375px) {
#gallery {display:none}
#gallery2 {display:block}
}
Tab Version එකේදි Desktop Version එකේ Gallery එක ඕන නැති නිසා ඒක {display:none} කරනවා. මේ වෙනකොටත් Tab Version එකේ Gallery එක හැංගිලා තියෙන්නේ. මොකද අපි කළින් ඒක {display:none} කළානේ. ඒ නිසා අපි ඒකට {display:block} කියලා දානවා. ඔන්න එතකොට ඒක පෙන්නන්න ගන්නවා. හැබැයි 1024px - 375px අතර පරාසයට විතරයි වලංගු.
දැන් ලියනවා Mobile Version (Apple Iphone 6) එකට Media Query එක.
@media only screen and (max-width: 375px) {
#gallery2 {display:none}
#gallery3 {display:block}
}
Mobile Version එකේදි Tab Version එකේ Gallery එක ඕන නැති නිසා ඒක {display:none} කරනවා. මේ වෙනකොටත් Mobile Version එකේ Gallery එක හැංගිලා තියෙන්නේ. ඒ නිසා අපි ඒකට {display:block} කියලා දානවා. එතකොට ඒක පෙන්නන්න ගන්නවා. හැබැයි 375px වලින් පහළ අගයන් වලට විතරයි.
ඒ ඇවිල්ලා ඒ ඒ Devicesවලට අලුතෙන්ම Codes ලියනකොට කරන වැඩක්. දැන් අපි බලමු තියෙන Code එකක් වෙනස් කරන්නේ කොහොමද කියලා. ඔන්න දෙවෙනි උදාහරණය. මුලින්ම දීලා තියෙන්නේ Desktop Version එක. ඊට පස්සේ Tab Version එක. ඊටත් පස්සේ Mobile Version එක.
Desktop Version එකේ Code එක තමයි මේ තියෙන්නේ.
HTML
<img id = "buddha"/> <br> <div id = "text"> Statue of Lord Kakusadha Buddha at Ruwanveli Maha Seya, Anuradhapura. </div> <div id = "decoration"> </div> |
CSS
#buddha { width : 25% } #text { width : 25%; font-size : 1.2em } #decoration { height : 20px; width : 20px; background-color : red } |
දැන් Tab Version එකේ Media Query එක ඇතුළට ගිහිල්ලා අදාළ වෙනස්කම් ටික සහිතව CSS Code එක ලියනවා මේ වගේ. එතකොට ඒ වෙනස්කම 1024px - 375px පරාසයට විතරක් පෙන්නනවා.
@media only screen and (max-width: 1024px) and (min-width:375px)
{
#buddha { width : 15% }
#text { margin-left : 200px }
#decoration { margin-top:50px; background-color:green }
}
ඊළගට Mobile Version එකේ Media Query එක ඇතුළට ගිහින් මෙහෙම ලියනවා !
@media only screen and (max-width: 375px)
{
#buddha { width:15%; transform : rotate(45deg); }
#text { margin-left : 200px ; color:orange; }
#decoration { margin-top : 50px; background-color : green; border-radius : 10px }
}
එතකොට ඒ වෙනස්කම 375pxවලට අඩු Width එකකදි පෙන්නනවා. Responsive කරන හැටි ගැන සරලව කියලා දෙන්න පුලුවන් ඔච්චරම තමයි..!!!!!!