Hi..hello viewers!.. Welcome to "Parallel Code"
Media Query in tamil
Media Query செய்வதற்கு தனி தனியான சில file-கள் தேவைபடுகிறது. கீழே கொடுக்கப்பட்டுளவாறு file-களை உங்கள் project folder-க்கு உள்ளே create செய்து கொள்ளுங்கள்.
File Creation
- media-query1.php
- media-query1.css
மேலே உள்ள file-களை போல நமக்கு சில தனி தனியான folder-களும் தேவைபடுகிறது. கீழே கொடுக்கப்பட்டுளவாறு folder-களை உங்கள் project folder-க்கு உள்ளே create செய்து கொள்ளுங்கள்.
Folder Creation
- css
- js
"css" folder, project-க்கு தேவையான அனைத்து style file-களையும் manage செய்ய உதவுகிறது. இதில் media-query1.css என்ற file-ஐ create செய்து கொள்ளவேண்டும். இதற்கான css style கீழே கொடுக்கப்பட்டு உள்ளது அதை copy paste செய்து கொள்ளுங்கள்.
"js" folder project-க்கு தேவையான அனைத்து javascript file-களையும் வைத்துகொள்ள உதவுகிறது. இதில் jquery.min.js என்ற file-ஐ create செய்து கொள்ளவேண்டும். இதற்கான js script கீழே கொடுக்கப்பட்டு உள்ளது அதை copy paste செய்து கொள்ளுங்கள். jquery.min.js இந்த file-ஐ இந்த link கிளிக் செய்து download செய்து கொள்ளலாம். Click and download jquery.min.js
Note: இந்த project-க்கு தேவையான முழு source code-ஐ இந்த Download Source Code button-ஐ கிளிக் செய்து download செய்து கொள்ளுங்கள். அல்லது கீழே தனி தனியாக கொடுக்கப்பட்டு உள்ள source code-ஐ copy paste செய்து கொள்ளுங்கள்.
1.media-query1.php
<html>
<head>
<title>Media Query</title>
<link href="css/media-query1.css" rel="stylesheet" type="text/css"/>
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
</head>
<body>
<div class="header">Header</div>
<div class="med-container">
<div class="left-side">
<div class="ico"><i class="fa fa-list" id="micon"></i></div>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
<div class="main-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 class="right-side">
<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>
</div>
<div class="footer"> Footer</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('.ico').on('click',function(){
var cls=$(this).next('ul').attr('class');
if(cls==undefined){
$(this).next('ul').addClass('menu-active');
}else{
$(this).next('ul').removeAttr('class');
}
});
});
</script>
</body>
</html>
2.media-query1.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
*/
body{
font-family: sans-serif;
}
.header{
width: 100%;
padding: 10px;
background-color: #ff0066;
}
.footer{
width: 100%;
padding: 10px;
background-color: #ff0066;
}
.med-container{
display: flex;
}
.left-side{
width: 25%;
padding: 10px;
background-color: #003eff;
color: #fff;
}
.left-side ul{
padding: 0;
margin: 0;
list-style-type: none;
}
.left-side ul li{
padding: 10px;
margin-bottom: 5px;
font-size: 25px;
background-color: #20b2aa;
color: #fff;
}
.main-content{
width: 50%;
padding: 10px;
}
.right-side{
width: 25%;
padding: 10px;
background-color: #003eff;
color: #fff;
}
.ico {
display: none;
}
@media (max-width:768px){
.med-container{
flex-wrap: wrap;
}
.left-side{
width: 100%;
}
.ico{
font-size: 30px;
display: initial;
}
.left-side ul{
display:none;
}
.main-content{
width: 100%;
}
.right-side{
width: 100%;
}
}
.menu-active{
display: block !important;
}
3.font-awesome.css
Click and download font-awesome.css
Note: இந்த page-ல் உள்ள code உங்களுக்கு சரியாக புரியாத பட்சத்தில் இதற்க்கான முழு "Youtube" வீடியோ link இங்கு கொடுக்க பட்டுள்ளது. அதை கிளிக் செய்து நீங்கள் இன்னும் தெளிவாக புரிந்து கொள்ளலாம்.
Click and see the video
Comments