Apple's Website - How Does It Autosize Itself For Mobile Devices?


Tags: css,html5

Problem :

I just asked a question about centering elements, and given what I had to do with that (wrapping several elements with another element just to get them to display similarly to Apple's layout and having to specify a width in order to center the ), how exactly do they get the site to work so nicely on mobile devices? Is there something I'm doing wrong? Here is the CSS I'm using for my page.

body
{
font-size: 80%;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
color: #000000;
background-color: #E4E0E0;/*;*/
/*background-attachment:fixed; used to fix a background image so only text scrolls*/ 
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;  
}

.wrapper
{
margin:auto;
width:950px;
}
.homediv
{
background-color:#F7F7F7;
border:1px solid #FFFFFF;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
/* width must be defined in the actual element */
-webkit-box-shadow: 0px 0px 8px #888888;
-moz-box-shadow: 0px 0px 8px #888888;
box-shadow: 0px 0px 8px #888888;
text-align:center;
padding:4px;
 }

.homediv:hover
{
background-color:#FFFFFF;
cursor:pointer;
}

.homediv img
{
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
}

What do I need to change in order to make the site automatically fit on screen sizes? The way it's currently set up, I have to specify widths within the elements themselves...



Solution :

They probably use CSS Media Types and Media Queries to use different stylesheet(s) depending on the media it's being presented on (e.g., screen, handheld).

There's a great article on ALA which prominently feature these techniques: "Responsive Web Design".


    CSS Howto..

    How do I stop the text from moving when hovered? (background-image is involved)

    How find all elements with a specific css property in a div and add a class to div

    How to add another text decoration definition with Javascript?

    CSS: How to make a div block *not* take space in its parent container

    How to use an image more than one place in CSS

    How to make a key shape using css?

    How do i move an image from left to right and right to left in javascript for infinite time?

    How to partly color the border with css [closed]

    how can i center the footer text in the bottom of the page regardless of screen size

    How can I make vertical switch

    how i can change the CSS class on click of an element [closed]

    How to place output from an external php file to a specific place on the page

    CSS Transition - how to make a text coming from the top side?

    How to change size to GtkWidget with CSS?

    How to customize the size of JCoverFlip?

    how do i change the css property for only one row with a custom class with out removing the styles from the other rows?

    how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome

    Odd visual effect (little line shows) when hovering over button in browser

    CSS div border shows up, but is transparent

    How to set a (nice) linear-gradient from any color to transparent?

    HTML5/CSS3 how to expand an anchor element to fit full size of it's li parent

    How can I create DIV “rows” while having a DIV float beside them?

    jquery css how to retain position if you remove margin

    How to prevent mouseenter event action with jQuery

    How to have several equal sized div blocks take 100% of a parent container

    Show/Hide tr elements based on multiple CSS classes and input from multiple checkboxes

    CSS how to deal with a lot of sprite without having to create a new css class

    Browser sizing Ctrl +/- :: How to manipulate settings?

    How to inject css in another page

    How to make an image always load in the center of page?