تمت الإفادة مقاس صفحة الجوال لموقع ويب

[yaquz]

السلام عليكم ورحمة الله وبركاته
وكل عام وانتم بخير

احتاج اعمل صفحة ويب بمقاسات محددة
بحيث تظهر بمقاس الجوال
يعني اي احد يدخل موقع الويب الخاص بي عند الضغط على امر التطبيق

يظهر له صفحة منبثقه خارجية بمقاس الجوال يتصفحاها كأنها جوال

امل دعمكم

 

[أبـو محـمد]

افتح المتصفح ثم اضغط من الكيبورد ctrl+shift+i يفتح معك Developer Tools ثم اضغط من الكيبورد ctrl+shift+m

تجد مقاسات الموبايل وغيرها من الانظمه امامك بالاعلى اختر من قائمة Dimensions: Responsive مقاس الذي تريده

 

[أبـو محـمد]

اسهل عليك الامر مثلآ اريده اذا وصل حجم شاشة معينه يتغير اللون او العرض الخ .

نجمع الـ class او الـ id المراد تقليل الـ px او تغييره الى لون اخر الخ . في داخل الـ media مثلآ انا وضعت اذا وصل عرض شاشة المتصفح لـ 768px يغير مافي الكلاسات header , p

طبعآ نفترض شاشة iPad Mini

HTML:

<div class="header">
  <p class="p">Welcome to bla bla </p>
</div>

Css :

@media screen and (max-width: 768px){
    .header .p{
        background-color: brown;
        color: white;
        font-size: 50px;
        text-align: center;
    }
}

ان شاء الله وضحت الفكره .!