منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب

نسخة كاملة : اكرر اضافة اي خطوة لكي ترسخ في ذهني css and media screen
أنت حالياً تتصفح نسخة خفيفة من المنتدى . مشاهدة نسخة كاملة مع جميع الأشكال الجمالية .
الاعلى مقاس اصغر من مقاس معين محدد
والتالي المقاس المعتاد
والتالي اقل مقاس يتم قبوله
التالي سورس صفحة الاتش ام ال لمن لا يريد تحميل الملف
PHP كود :
<html>
<
head>
<
meta name="viewport" content="width=device-width, initial-scale=1">
<
style>
@
media screen and (min-width258px)
{
#sorry{
display:none;
}
}
 
/*@media screen and (max-width: 600px) {
#mycontainer *{
display:block;
}
}*/
 
@media screen and (max-width257px) {
sorry{
display:block;
}
#mycontainer {display:none;}
table{display:none;}
}
table {
border:1px solid black;
width95%;
height250px;
}
#mycontainer *{
display:inline;
}
.
td{
vertical-aligntop;
padding:5px;
}
</
style>
<
title>
Soso
</title>
</
head>
<
body>
<
center>
<
table>
<
tr>
<
td class="td" bgcolor="blue">
<
div id="mycontainer">
<
div><input type="text" id="txtusername" /></div>
<
div><input type="text" id="txtpassword" /> </div>
<
div><input type="button" id="ok" value="OK" /> </div>
</
div>
</
td>
</
tr>
</
table>
<
br>
<
div id="sorry">
<
h1>معذرة لكن مقاس شاشة جهازك تبدو وكانها صغيرة جدا!</h1>
<
img src="sad.png" width="100px" />
</
div>
<
br>
</
center>
</
body>
</
html
السطر التالي رغم اهميته الا انه لا يكفي:
PHP كود :
<meta name="viewport" content="width=device-width, initial-scale=1"