Step 1 : First let's design a simple website layout like the below image.
Step 2 : I have three different breakpoints setup to achieve various effects when resizing the browser window. So here in the tutorial the break point is 1126px for desktop, 768px for tablet and 320px for iphone.
Step 3 : You have to use the viewport meta tag in your <head> for the responsive website. The viewport meta tag enables web developers to indicate that the web page they built is optimized for mobile devices. It's generally used for responsive design to set the viewport width and initial-scale on mobile devices.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0", user-scalable=no" />
- width - device width of the viewport in pixels.
- height - device height of the viewport in pixels.
- initial-scale - sets the the initial scaling of the viewport. The 1.0 value displays an unscaled web page.
- user-scalable - specifies whether the user can scale the web page (zoom in or zoom out). Can get the yes or no values.
- maximum-scale or minimum-scale - sets the maximum or minimum scaling for the web page. Can get values between 0.25 to 10.0.
No comments:
Post a Comment