Answers for "@media html"

orientation css max and min width media query

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

css @media

/* When the width is between 600px and 900px OR above 1100px */
@media screen and (min-width: 600px) and (max-width: 900px), (min-width: 1100px) {
  div.example {...}
}

media query

@media (max-height : 800px){ /* from 0 to 800 px max height applies */
  p{
    font-size:10px
  }
}

how to display media in html

###                         How to display Media with html                         ###
_______________________________________________________________________________________






_________________________________________________________________________________________

###                         Image(s)                         ###


### You can easily add a img with this line of code :
<img src="Type here the location of your picture" />

### But you can also add a style to it like this :
<img src="Type here the location of your picture" class="type here the name of your style" />

### If you don't know how to make a style? i will be maybe uploading a tutorial on it later 


### If you want to keep it easy and not add a style you can also add details in the command itself
### like this :
<img src="Type here the location of your picture" width="type here a amount of pixels" />

### if you really want to customize it than i would recommend using a style



## Here is an example i made:
<img src="src/picture_beach.jpg" class="pictures" />

________________________________________________________________________________________

###                         Video(s)                         ###


### adding video(s) is somewhat more complicated than adding image(s) here is the basic way :
<video controls>

    <source src="Type here the location of your video" />
</video>

### To video(s) you can also add a style like this :
<video controls class="Type here the name of Your style">

    <source src="Type here the location of your video" />
</video>

### If you don't know how to make a style? i will be maybe uploading a tutorial on it later 



### you can also customize the video without using a style easily
<video controls autoplay poster="Type here the location of a picture for a thumbnail if you don't want one than don't put poster here">
    
    <source src="Type here the location of your video" />
</video>

### If you want to autoplay the video than type autoplay where i put it. If you don't want autoplay just don't put it there



## Here is an example i made:
<video controls autoplay poster="/img/beach.png">
    
    <source src="/video/sea.mp4" />
</video>

_______________________________________________________________________________________

###                         Audio(s)                         ###


### Adding a audio file is almost the same as adding a video file here is the basic code line :
<audio controls >

    <source src="Type here the location of your audio" />
</audio>

### just like adding a style to video(s) its done like this :
<audio controls  class="The name of your style" >

    <source src="The location of your audio" />
</audio>

### If you don't know how to make a style? i will be maybe uploading a tutorial on it later 



### You can customize the audio if you don't want to use a style very easy
<audio controls autoplay loop preload="" >

    <source src="The location of your audio" />
</audio>

### "autoplay" = It will play automaticly when you go to the html page
### "loop"     = If you add this the file will never stop playing. when it ends it will start over again
### "preload"  = You have 3 types of preloading. 1="auto" It will automaticly load. 2="metadata" It will load before the metadata. 3="none" It will just load 
### like it normaly does

### You can also add above or under the line <source> the words: "Your Browser does Not support This music File. Please Try another browser"
### You just have to add the text nothing else and it will display when the audio file can't load. 



## here is an example i made:
<audio controls autoplay loop preload="metadata" >
    <source src="/audio/audiofile3904.mp3" />
    Your Browser does Not support This music File. Please Try another Browser
</audio>

_______________________________________________________________________________________

# If this code helped you please leave a like on it. If you want to see more of this follow me
# Or just take a look at another answer of my answers
#
# THIS CODE HAS BEEN MADE BY : Vast Vicuña