Languages

Hi..hello viewers!.. Welcome to "Parallel Code"

Media Query in tamil

Media Query செய்வதற்கு தனி தனியான சில file-கள் தேவைபடுகிறது. கீழே கொடுக்கப்பட்டுளவாறு file-களை உங்கள் project folder-க்கு உள்ளே create செய்து கொள்ளுங்கள்.

File Creation

  1. media-query.php
  2. media-query.css

மேலே உள்ள file-களை போல நமக்கு சில தனி தனியான folder-களும் தேவைபடுகிறது. கீழே கொடுக்கப்பட்டுளவாறு folder-களை உங்கள் project folder-க்கு உள்ளே create செய்து கொள்ளுங்கள்.

Folder Creation

  1. css

"css" folder, project-க்கு தேவையான அனைத்து style file-களையும் manage செய்ய உதவுகிறது. இதில் media-query1.css என்ற file-ஐ create செய்து கொள்ளவேண்டும். இதற்கான css style கீழே கொடுக்கப்பட்டு உள்ளது அதை copy paste செய்து கொள்ளுங்கள்.

Note: இந்த project-க்கு தேவையான முழு source code-ஐ இந்த Download Source Code button-ஐ கிளிக் செய்து download செய்து கொள்ளுங்கள். அல்லது கீழே தனி தனியாக கொடுக்கப்பட்டு உள்ள source code-ஐ copy paste செய்து கொள்ளுங்கள்.

Download Source Code

1.media-query.php


<html>
    <head>
        <title>Responsive device meta tag</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="css/mediaquery.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="menu-container">
            <div class="menu">
                <ul>
                    <li>Menu1</li>
                    <li>Menu2</li>
                    <li>Menu3</li>
                    <li>Menu4</li>                    
                </ul>
            </div>
        </div>
        <div class="body-container"> 
            <!--            <div class="cources">
                            <div>
                                <h2>Languages</h2>
                                <ul>
                                    <li>PHP</li>
                                    <li>jQuery</li>
                                    <li>HTML</li>
                                    <li>nodeJS</li>
                                    <li>Laravel</li>
                                </ul>
                            </div>
                            <div>
                                <h2>Languages</h2>
                                <ul>
                                    <li>PHP</li>
                                    <li>jQuery</li>
                                    <li>HTML</li>
                                    <li>nodeJS</li>
                                    <li>Laravel</li>
                                </ul>
                            </div>
                            <div>
                                <h2>Languages</h2>
                                <ul>
                                    <li>PHP</li>
                                    <li>jQuery</li>
                                    <li>HTML</li>
                                    <li>nodeJS</li>
                                    <li>Laravel</li>
                                </ul>
                            </div>
                        </div>-->
            <div class="content">
                <div>
                    <h1>HTML meta Tag</h1>
                    <p>XML Paper My text table Specification, a file format that preserves document formatting and enables file sharing. When the XPS file is viewed online or printed, it keeps exactly the format that users intended, and the data in the file cannot be easily changed.Drop caps and initials practices. Today drop caps and initials can be used in numerous ways. Whatever design you use, use it throughout the story. Do not mix different designs for drop caps and initials in the same story, make it consistent.</p>
                </div>
                <div>
                    <h1>XML Paper Specification</h1>
                    <p>A published work, an initial or drop cap is a letter at the beginning of a word, a chapter, or a paragraph that is larger than the rest of the text. The word is derived from the Latin initialis, which means standing at the beginning.A drop cap is the where the first character of the first paragraph is made larger, taking up several lines of text or the first few sentences. Drop caps are used in various media, including books, newspaper articles, documents, and webpages. Drop caps add style or grab a reader's attention.</p>
                </div>
                <div>
                    <h1>Drop caps</h1>
                    <p>Drop caps and initials practices.My text table Today drop caps and initials can be used in numerous ways. Whatever design you use, use it throughout the story. Do not mix different designs for drop caps and initials in the same story, make it consistent.Drop caps and initials practices. Today drop caps and initials can be used in numerous ways. Whatever design you use, use it throughout the story. Do not mix different designs for drop caps and initials in the same story, make it consistent.</p>
                </div>
                <div>
                    <h1>XML Paper</h1>
                    <p>XML Paper My text tableSpecification, a file format that preserves document formatting and enables file sharing. When the XPS file is viewed online or printed, it keeps exactly the format that users intended, and the data in the file cannot be easily changed.Drop caps and initials practices. Today drop caps and initials can be used in numerous ways. Whatever design you use, use it throughout the story. Do not mix different designs for drop caps and initials in the same story, make it consistent.</p>
                </div>
            </div>
        </div>
        <div class="footer-container">
            <div class="footer">
                <h5 style="text-align: center;">Footer copyright @ 2021 Parallel Code</h5>
            </div>
        </div>
    </body>
</html>

2.media-query.css


/*
320-480px smartphones, iPhone, portrait 480x320 phones 
481-640px - portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. 
641-960px - portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones 
961-1024px - tablet, landscape iPad, lo-res laptops ands desktops 
1025-1080px - big landscape tablets, laptops, and desktops 
1281 and above - hi-res laptops and desktops TV 
*/

.menu ul {
    background-color: #03A9F4;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.menu ul li{
    background-color: gold;
    padding: 5px;
    margin: 10px;
    list-style-type: none; 
}
.cources{
    display: flex;  
    flex-wrap: wrap;
    justify-content: space-between;
}
.cources div{
    background-color: gold;
    margin: 0 5px 5px 0;
    width: 30%;
    padding: 10px;
}
.content{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.content div{
    width: 48%;
    margin: 0 5px 5px 0;
    padding: 10px;
    background-color: #2e736e;
    color:#fff;
}


@media screen and (min-width:960px){
    .content div{
        min-width: 100%;
    }
}

Note: இந்த page-ல் உள்ள code உங்களுக்கு சரியாக புரியாத பட்சத்தில் இதற்க்கான முழு "Youtube" வீடியோ link இங்கு கொடுக்க பட்டுள்ளது. அதை கிளிக் செய்து நீங்கள் இன்னும் தெளிவாக புரிந்து கொள்ளலாம்.

Click and see the video

Comments

Languages