<!DOCTYPE html>
- in HTML, the doctype is the required this at the top of the document.
- this is not an html tag, it is an information to the browser about what document type to expect. and this means this document is HTML 5.
- this is not case sensitive.
viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />viewportis the area of the window where web content can be seen. This is not always the same size as the rendered page, so the browser usually provides scrollbars for users.- Not all devices are the same width. You should make sure that your pages work well in a large variation of screen sizes and orientations.
- here we have 2 properties which are
widthandinitial-scale. widthcontrols the size of the viewport, can be in pixels, vh, % or special value likedevice-widthinitial-scalecontrols the zoom level when the page is first loaded
Media Query
@media mediaqueries { /* style rules */ }examples
@media screen { ... }
@media screen and (min-width: 768px) { ... }
@media (min-width: 768px) and (max-width: 1024px) { ... }
@media (color-index)
@media screen and (min-width: 768px), screen and (orientation: portrait), ... {...}
// ,(comma) is like OR
@media not screen and (min-width: 768px) {...}
// this is `not (screen and (min-width: 768px))`
Software Engineer in London, UK