Mobile-Based Development basics

1. Viewport

Property	Description
Width	Uses device-independent pixels to represent the desired viewport width. it can be a definite number (such as 240) or preferably a relative value, such as Device-width.
height	uses device-independent pixels to represent the desired viewport height.   It can be a definite number (such as 320) or preferably a relative value, such as Device-height.
initial-scale	value 2 Doubles the page size, You can also use decimal values, such as "1.0".
Minimum-scale	Represents the minimum allowable zoom level for a page. A value of 1 indicates that the user cannot shrink the page below the natural size.
Maximum-scale	Represents the maximum allowable zoom level for a page. The maximum value is 10.0.
User-scalable	The Yes/no property that indicates whether the user is allowed to scale the page.

Common usage:

<name= "Viewport"  content= "width=device-width,minimum-scale=1.0, Maximum-scale=1.0,user-scalable=no ">

2. Media type

Common usage:

<!----<href= "Style.css"  media  = "screen"><!---@media screen{    selector{ Rules}}

In addition, the media type supports not and only keywords

@media only Screens {      selector{rules}  }

3. Media Query

Syntax structure:

1. @media Media type and (CSS property: value)

@media screen and (max-width:240px) {    body{font-size:medium;} }

2. @media Media type and (CSS property: value), Media type and (CSS property: value)

@media Handheld and (min-width:360px), screen and (min-width:480px) {    body{font-size:large;} }

4. Screen (landscape/portrait)

/* Vertical Screen */  {    selector{rules}}/* Horizontal screen */{     Selector{rules}}

Mobile-Based Development basics