We are in the age of touch screens with various size of
screen. Therefore, the way the browser display the content on each device is
very different. For example, if you use iPhone with the resolution of 320x480(iPhone
4) or 27 inch iMac or Kindle 600x1024, the browsers display in different ways
in column and row of content flow. Because of that, we need to modify the
technology of web coding. To do that, people will define some available screen
resolution in there code. If they define the width less than 400 pixel and the
height less than 500 pixels, the browser will understand that this is the
iPhone screen, so that the browser will find the iPhone CSS file, so the
browser will display content correctly by the created content frame. Hence, in
a html file of a responsive website, there are many different CSS file placed
at the <head> section: <link src=”css/iPhoneScreen.css” type=”css/stylesheet”>.
What they use to flow the content in a responsive website is multiple fluid
grid layouts. The CSS file work based on the fluid grid layouts by the ID and
Class name of the element they are going to break apart to place on the next
line. Moreover, the photo is also responsive with definition in CSS file by
max-width and max-height value. With that, the photo will shrink or expand up
to the screen size and CSS definition.
Responsive website is now commonly applied to different
screen size, small, medium and large. Therefore, with responsive technology, we
don’t need to create another page for the each correspond screen size. It’s convenient,
less cost, code, loading time and memory consuming.
Link for reference:
No comments:
Post a Comment