Responsive Design Site (Meta label, Media queries, BootStrap) - FontEnd Development study notes

•  What is meta label?

            The Meta tag will automatically recognise the width and height of the screen (e.g, Phone, tablet,                PC) and adapt it adaptively.

            For example, as shown in the picture:

                                                     

As can be seen from the above screenshots, the picture will be scaled down when we don't use meta label.

• Meta parameters
• width = device-width (width is equal to the width of the current device)
• initial-scale (Initial scaling default = 1.0)
• maximum-scale (The maximum amount the user is allowed to zoom, default = 1.0)
• If to allow users to zoom (default = no)
• Meta queries 
• It is the core of responsive design site

        Example of using meta queries:

• Using BootStrap to realise responsive design (e.g., in diff devices, you want to display diff elements in a row)

• BootStrap parameters:
• col-xs- num 
• col-sm- num
• col-mid- num
• col-lg- num
• xs, sm, md, lg indicate the minimum screen (phone), small screen (tablet), middle screen (normal laptop screen) and large screen (External monitor)
• num indicates 12/num = how many elements you want to display in a one row. For example, if num is equal to 6, which indicates the web will display 2 elements in a row.