"responsive Web Design practices" Learning Notes

Original Book: responsive web design practices

2nd Chapter Flow Layout

1. Layout Options

• There are many problems with the traditional fixed layout, and as the screen size becomes more and more diversified, the fixed layout is no longer applicable.
• In a flow layout, the units of measure are no longer pixels, but instead become percentages.
• The flex layout is similar to the flow layout, but typically, the flex layout is used as an EM unit. One benefit is that as the user increases or decreases the font, the width of the element that applies to the flex layout changes Proportionally. But it may also appear as a horizontal scrollbar
• Mixed layouts

Media enquiry:

Media queries allow different styles to be used depending on the Device's information----properties such as screen width, orientation, or resolution

Breakpoint:

Those that are specified, start applying a new media query Point. For example, a breakpoint at 980px means that a new media query will be triggered when the browser width is greater than or less than this value

2. Font size

• Pixels: not flexible enough
• Em: scalable, cascade-selectable
• Percent: scalable, Cascade
• REM (root em): the size of REM is related to the root element---html element. Mobile platforms not yet supported

3. Grid Layout

• An implementation of a mobile layout:
  

  #container{width:95%;padding:. 625em 1.05% 1.5em;/*10px/16px 10px/948px 24px/16px*/margin:Auto 0; }. Main{float: left;Margin-right:2.53%;/*24/948*/width:65.823%;/*624/948*/}. Aside{float: right;width:31.645%;/*300/948*/}

• Fixed-width objects in the mobile world: images
  

      aside img,    . main img,    . slats img{        width:100%;         Max-width: 100%;    }

  You cannot define an img's height and width property values in html, and if you set these values, you cannot scale the picture proportionally.

4. Mixing fixed width and flow width
Purpose: to fix the right sidebar, just let the main bar flow
Method: Use table layout

    . main{        display: table-cell;         Padding-right: 2.53%;   /*  *    /}    aside{        display: table-cell;         Width: 300px;    }

Use conditional comments to provide alternate styles for IE 7 and the following versions of Internet Explorer: (! Iemobile condition is determined because Windows Phone 7 will also load this alternate Style)

<!-- [if (lt Ie 8) & (! Iemobile)]><link rel= "stylesheet" type= "text/css" href= "css/ie.css" media= "all" ><! [endif]  -

The 3rd Chapter Media Inquiry

1. viewport

On mobile devices, Many devices will return a larger layout viewport to the Browser.

Viewport Labels:

<name= "viewport"  content= "directive, directive"/> 

Properties of Viewports:

• Width: you can set the viewport to a specific width, or to the width of the device screen
  The best option is to use the device-width in the width declaration

  <name= "viewport"  content= "width=device-width"/> 

• Height: allows you to specify a specific height. It is best to equate the height of the layout viewport to the height of the Screen.
  But generally not often use height, height is useful when you do not want the page to scroll vertically
  

  <name= "viewport"  content= "height=device-height"  />

• User-scalable: tells the browser whether to allow users to scale on the Page. The default value is yes, which is run scaling
  

  <name= "viewport"  content= "user-scalable=no"/>

• Initial-scale: you can set the zoom level at page initialization by assigning a value of 0.1 (10%) to 10.0 (1000%) to this parameter
  

  <name= "viewport"  content= "initial-scale=.5, width= Device-width "/>

  As in this example, the Width property is set to the device, and the Initial-scale to. 5, which means the browser will zoom out of everything: for example, on a 320px wide device, the page will be displayed as 640px

• Maximum-scale: How much the browser allows the user to enlarge the Page. In mobile safari, The default value is 1.6 (160%), and you can specify 0.1-10.0. if you set it to 1.0, it means that the user is prevented from scaling the page
• Minimum-scale: The browser allows the user to reduce the page to what Extent. In mobile safari, The default value is 0.25, which specifies 0.1-10.0. If you set it to 1.0, it means that the user is prevented from shrinking the page

2. Media query structure

Media queries can be queried by the browser to determine whether a particular expression is True. If it is true, load some special, suitable style for this situation, so as to adjust the Layout.

The general form of media queries Is:

{    rules}

Consists of four basic components:

• Media type: specific target device type
• Medium Expression: Test Whether a feature is true
• Logic keywords: You can use keywords (such as and, or, not, only) to create more complex expressions
• Rule: adjust the basic style of the display effect

1) Medium Type:

Each media type tells the user that the agent (for example, the browser) is loading a particular style sheet. For example, If you know the screen media type, all user agents that browse the page through a computer monitor will load the appropriate Style. In the case of print media type, the corresponding style will be loaded when printing or printing preview.

10 different Types:

All	All Devices (default)
Braille	Braille Tactile Feedback devices
Embossed	Paging Braille Printer
Handeld	Handheld devices (usually small screens and possibly black and white SCREENS)
Print	Print or Print preview
Projection	Projector
Screen	Color Computer screen
Speech	Language synthesizer
Tty	Devices using Fixed-character spacing (terminal or printing device)
Tv	Tv

The query statements in the style are as Follows:

{}

You can also take the form of an external style file and specify the media properties within the link element:

<rel= "stylesheet"  href= "print.css"  media= " print "/>

Either way, the effect of the referenced CSS is only visible when you print or print Preview.

Each media query must contain a medium type, and if the media type is not set, the query will use the default value all, but the actual behavior in different browsers is not the Same.

2) Medium Expression

Determine if the width of the device viewport is greater than 320px:

@media screen and (min-width:320px) {}

First detect if the device accessing the page belongs to screen, and then test the Device's viewport width----width of at least 320px

The media characteristics that can be used, and the Min-and max-prefixes also apply to these features

Characteristics	Describe	Value	You can specify a minimum or maximum
Width	Describe the width of the device display area	< length > (E.G. 320)	Is
Height	Describe the height of the device display area	< length > (E.G. 600)	Is
Device-width	Describe the width of the device rendering interface	< length > (E.G. 320)	Is
Device-height	Describe the height of the device rendering interface	< length > (E.G. 600)	Is
Orientation	Specifies that the device is in a vertical (height greater than Width) or horizontal (width greater than height) state	Portrait | Landscape	Whether
Aspect-ratio	The ratio of the width property to the Height property	< ratio > (E.G. 16/9)	Is
Device-aspect-ratio	The ratio of the Device-width property to the Device-height attribute	< ratio > (E.G. 16/9)	Is
Color	Number of bits per color component of the device	< integer > (E.G. 1)	Is
Color-index	Number of entries in the Device's color lookup table	< integer > (E.G. 256)	Is
Monochrome	The number of bits per pixel of the black-and-white screen device (if not the black and white screen will return 0)	< integer > (E.G. 8)	Is
Resolution	Device resolution (pixel density), which can be expressed as dots per foot [dpi] or dots per centimeter [dpcm]	< resolution > (E.G. 118dpcm>	Is
Scan	Scanning process for "tv" class devices	Progressive | Interlace	Whether
Grid	Returns whether the device is a grid device (1) or a bitmap device (0)	< integer > (E.G. 1)	Whether

3) Logical Keywords

@media screen  and (color){}/*determine if the device is equipped with a color screen*/@media  not-screen and (color){}/*equals not (screen and (color))*/@media screen and (color), projection and (color)/*a comma indicates or*/ /*Many browsers support media types but do not support media queries, which sometimes cause browsers to try to download styles that you do not want users to see. you can use the only keyword to hide media queries against older browsers so that they do not recognize the corresponding Style. Browsers that support the only keyword continue to process query statements with the ONLY keyword*/@media  only screen and (color)/*If the device does not support media queries, it will ignore the query. if the device supports media queries, then the device will treat the above query as equivalent to @media screen and (color)

3. Inline styles and external styles

Media queries can be written either inside the page or in the page via the link Element's media properties.

• Inline Media query:
  • Pros: only one HTTP request is required
  • Cons: all styles will be downloaded, whether or not Used. and a single CSS file can get very large
• External Media Query
  • Regardless of whether it will be used, it will actually download all the Styles. The idea is that if the size or orientation of the Browser's window changes, its own style is already in place.
  • Advantages: the file becomes very small and facilitates maintenance

4. Media Query Order

• Design down from the desktop side

  • @media All and (max-width:768px) {}@media All and (max-width:320px){}

  • Cons: mobile device support for media queries is not perfect
• Design up from the mobile side

  • @media All and (min-width:320px) {}@media All and (min-width:768px){}

  • To get Better browser support,

  • And can reduce the complexity of CSS files

5. Create a core experience

6. Determine the breakpoint

Traditional approach: use some fixed standard widths: 320px (iphone and some other devices), 768px (ipad) and 1024px

The problem is that devices that are between these widths may be overlooked.

1) a better approach is to follow the content:

Depending on the content, decide where you should set breakpoints and how many breakpoints you need to Set.

Actually zoom the browser, and then slowly pull the wide window until something needs to be adjusted when you set the Breakpoint.

2) increased support for large screens.

3) increase flexibility with EM for media queries

Even if you set a breakpoint in the EM unit

7. Navigation Bar

1. Don't do Anything.
2. Convert to Drop-down list
3. Toggle Menu

"responsive Web Design practices" Learning Notes