If you want to see the full HTML file, you can download it from the rwd. By default, web pages are flexible. If you were to open the example page, even as it is at this point with no media queries present , and resize the browser window you'll see the text reflows as needed. As you can see, it's rendering like a 'normal' web page would on an iPhone. The reason for that is that iOS renders web pages at px wide by default and shrinks them down into the viewport.
The viewable area of a browser is known technically as the viewport. The viewport is seldom equivalent to the screen size of a device, especially in instances where a user can resize a browser window.
Therefore, from now on, we will generally use this more accurate term when we are referring to the available space for our web page.
This viewport meta tag is a non-standard but de facto standard way of telling the browser how to render the page. In this case, our viewport meta tag is effectively saying "make the content render at the width of the device". In fact, it's probably easier to just show you the effect this line has on applicable devices:. The text is now rendering and flowing at a more 'native' size.
Let's move on. We will cover the meta tag and its various settings and permutations and the standards based version of the same functionality in Chapter 2 , Media Queries — Supporting Differing Viewports. They say a picture is worth a thousand words. All this writing about scones in our sample page and there's no image of the beauties. I'm going to add in an image of a scone near the top of the page; a sort of 'hero' image to entice users to read the page.
That nice big image px wide is forcing our page to render more than a little wonky. We need to fix that. We could add a fixed width to the image via CSS but the problem there is that we want the image to scale to different screen sizes.
For example, our example iPhone is px wide so we could set a width of px to that image but then what happens if a user rotates the screen? The px wide viewport is now px wide. Thankfully it's pretty easy to achieve fluid images that will scale to the available width of their container with a single line of CSS. Here is the first thing I'm adding.
Ordinarily I'd be setting a few other defaults, and we'll discuss those defaults in later chapters, but for our purposes I'm happy to open with just this:. Now when the page is refreshed we see something more akin to what we might expect. Where a containing element such as the body or a div it sits within is less than the intrinsic width of the image, it will simply scale up to the maximum available space. To make images fluid you could also use the more widely used width property.
When a property of width is used then the image will be displayed at that width, regardless of its own inherent size. With a container far wider than the image as is the case with our logo this leads a massively oversized image. Everything is now laid out as expected. No matter the viewport size, nothing is overflowing the page horizontally. However, if we look at the page in larger viewports, the basic styles start to get both literally and figuratively stretched.
Take a look at the example page at a size around px:. Oh dear! In fact, even around px wide it's starting to suffer. Around this point it would be handy if we could rearrange a few things. Maybe resize the image and position it off to one side. Perhaps alter some font sizes and background colors of elements. Thankfully, we can achieve all this functionality quite easily by employing CSS media queries to bend things to our will. As we have established, somewhere beyond the px wide point, our current layout starts to look stretched.
Let's use CSS3 media queries to adjust the layout depending upon the screen width. Media queries allow us to apply certain CSS rules based upon a number of conditions screen width and height for example. When people first started making use of media queries it was common to see breakpoints in designs built specifically around the popular devices of the day. At the time it was typically iPhone px x px and iPad px x px that defined these 'breakpoints'. That practice was a bad choice then, and it would be an even worse one now.
The problem is that by doing that we are catering a design to a specific screen size. We want a responsive design—something that is agnostic of the screen size viewing it; not something that only looks at its best at specific sizes. Therefore, let the content and the design itself determine where a breakpoint is relevant.
Maybe your initial layout starts to look wrong at px wide and greater, perhaps px. Your own project design should determine when a breakpoint is needed. However, for the purpose of whipping our basic example into shape, we will concentrate on just one type of media query; a minimum width media query.
CSS rules within this type of media query only get applied if the viewport is a minimum defined width. The exact minimum width can be specified using a raft of different length units including percent, em, rem, and px. In CSS, a minimum width media query is written like this:. The media directive tells the browser we are starting a media query, the screen part declaring 'screen' is technically not needed in this situation but we will deal with that in detail in the next chapter tells the browser these rules should be applied to all screen types and the and min-width: 50em tells the browser that the rules should be limited to all viewports above 50em of size.
What he meant by that is that the first rules we write, outside of a media query should be our 'base' rules which we then enhance for more capable devices. For now, simply be aware that this approach re-enforces our smallest screen first mentality and allows us to progressively layer on detail as and when the design necessitates it. Therefore, let's mix things up a little by way of a simple example of how we can lay things out differently at different viewport sizes.
Almost all browsers have a default text size of 16px so you can easily convert widths to rems by dividing the px value by First off, we will stop that main 'hero' image getting too big and keep it over on the right. Then the intro text can sit to the left. We will then have the main portion of text, the 'method' that describes how to make the scones, on the left below with a small boxed out section detailing the ingredients over on the right.
All these changes can be achieved relatively simply by encapsulating these specific styles within a media query. Learn algorithms for solving classic computer science problems with this concise guide covering everything from fundamental ….
Scott, Shelley Powers. Why reinvent the wheel every time you run into a problem with JavaScript? This cookbook is …. React helps you create and work on an app in just a few minutes, but learning …. Data is at the center of many challenges in system design today.
Difficult issues need to …. Buy from Amazon. New edition now available. That is to say, the unfinished specification. In fact, HTML5. Some features were added and some lost during the interim period. This meant that some items in the first edition of HTML5 in easy steps were obsolete, and some were missing.
0コメント