Scribd
Upload
26 views1 page

HTML Css Notes 3

The document provides instructions for making code compatible with phone devices. It explains to include a viewport meta tag to set the width and scale for proper display on phones. It also provides a tip that images must use a class to hide for mobile and describes how to target specific CSS for different device types using media queries.

Uploaded by

ismailhansal3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
26 views1 page

HTML Css Notes 3

The document provides instructions for making code compatible with phone devices. It explains to include a viewport meta tag to set the width and scale for proper display on phones. It also provides a tip that images must use a class to hide for mobile and describes how to target specific CSS for different device types using media queries.

Uploaded by

ismailhansal3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

++++++++++++++++++++instruction for the code to be compatible with phone devices+++

++++++++++++++++

head section:
<meta name="view port" content="width=device-width,initial-scale=1.0">

explanation:

- The "viewport" refers to the area of the browser window where the web page is
displayed.
- width equal to the device width
- The initial-scale of 1.0 tells the browser to set the zoom level of the page to
100% when it first loads. This means that the web page will be displayed at its
actual size, without any zooming or scaling applied.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++

astuce: if i want to diplay:none (for mobile) i have to obligatory use a class for
img .otherwise the image wont disappear

If i want to specifie a specific css to a type of device :


@media only screen and (min-width: 768px)
EXPLANATION :
-Media queries are used to specify different styles for different devices and
screen sizes.
-The only screen part of the query indicates that it should only apply to screens.
-The (min-width: 768px) part specifies the minimum screen width required for the
styles to be applied.

You might also like