سعيد محمد
غالباً الكود الذي اقترحه الزميل علي سيتم تطبيقه على التابليت أخي.
لكن عند عرض الموقع على شاشة التابلت الموسعة ربما يختلف الأمر، ولكي تتحكم بصورة أكبر في أحجام العرض على مختلف الشاشات، يمكنك استخدام القيمة min-width لتعيين الحد الأدني للعرض، وكذلك القيمة max-width لتعيين الحد الأقصى للعرض.
مثال:
(min-width: 768px)
and
(max-width: 1024px)
في هذه الحالة سيتم تطبيق التعديلات على الشاشات التي يبدأ حجمها من 768 بكسل وحتى 1024 بكسل.
بهذه الطريقة يمكنك التحكم في شكل العرض على مختلف أنواع الشاشات.
واليك الأبعاد الإفتراضية لمختلف أحجام الشاشات:
- العرض 320px — 480px : شاشات الهاتف الجوّال
- العرض 481px — 768px: شاشات الأيباد والتابلتس
- العرض 769px — 1024px: شاشات اللابتوب وشاشات الديسكتوب الصغيرة.
- العرض 1025px — 1200px: الشاشات الكبيرة.
- أكبر من 1201px: خاص بالشاشات الكبيرة مثل شاشات التلفات الذكية.
