مع ملاحظة الاستخدام المتزايد للأجهزة المحمولة، منذ نهاية أبريل 2015، فرضت Google عقوبات على مواقع الويب التي لا تكون صفحاتها جاهزة للجوال. النتيجة، بالنسبة لك كبار المسئولين الاقتصاديين، فأنت بحاجة إلى التأكد من عرض موقع الويب الخاص بك بشكل لائق على الشاشات الكبيرة والصغيرة.
في هذه المقالة ، سأريك كيف يمكنك وضع موقع الويب الخاص بك على الصفحة باستخدام القاعدة media من CSS3.
من المهم ملاحظة أن المصطلحين "متجاوب" و "متوافق مع الأجهزة المحمولة" غالبًا ما يستخدمان بالتبادل على الرغم من الاختلاف في معناهما الحقيقي. يعد فهم ما تعنيه كل واحدة أمرًا مهمًا لتكون قادرًا على ضمان أن موقع الويب الخاص بك يلبي المعايير اللازمة لاستيعاب جميع أحجام الشاشات.
ولكن من قبل ، إذا لم تقم بتثبيت WordPress ، فاكتشف كيفية تثبيت وورد بلوق الخطوات 7 et كيفية العثور عليها، وتثبيت وتفعيل موضوع ورد على بلوق
ثم ، دعنا نعود إلى سبب وجودنا هنا.
استجابة والمتنقلة متوافق
المواقع التي ليست كذلك لا تستجيب ولا متوافق مع الجواليتم عرضها بشكل مماثل على جميع الشاشات ، أي أن إصدار الشاشات الكبيرة معروض في كل مكان. على الشاشات الأصغر ، يجب عليك تمرير الصفحة أفقيًا لمشاهدة كل محتوياتها. من الصعب التنقل على هذه الشاشات.
اكتشف أيضًا هذه 8 WordPress الإضافات لتخصيص مظهر موقع الويب الخاص بك
موقع على شبكة الإنترنت هو موبايل متوافق عندما يفي بالحد الأدنى الصارم للعرض على الهاتف المحمول ، مما لا يجعله موقعًا متجاوبًا. على سبيل المثال ، يمكن اعتبار موقع ويب متوافقًا مع الأجهزة المحمولة إذا لم تكن مضطرًا للتنقل أفقيًا. هذا يتسبب في أن تصبح عناصره صغيرة ولا يمكن تمييزها. يجب عليك بعد ذلك التكبير لقراءة محتواها.
من جانبهم المواقع استجابة تتكيف تمامًا مع أحجام الشاشات المختلفة. يعيدون تعريف عناصرهم بحيث يمكن رؤيتها واستخدامها بسهولة على أصغر الشاشات. هذا هو نوع التصميم الذي تريده لموقعك على الويب.
انظر أيضا لدينا 10 WordPress الإضافات لإنشاء نموذج الحجز على موقع الويب الخاص بك
أنت تعرف الآن الفرق بين الهاتف المحمول المتجاوب والمتوافق. سنرى الآن القاعدة media CSS3 الذي يسمح لك بتحديث موقع الويب الخاص بك للاستجابة أو للإنشاء بسهولة تامة وورد المواضيع مع محتوى سريع الاستجابة.
القاعدة media من CSS3
لجعل موضوعك يستجيب ، ستحتاج إلى القاعدة media من CSS3. بشكل أساسي ، يسمح لك بتحديد الأنماط التي تريد استخدامها لنوع (حجم) معين من الشاشة. ستستخدمها كقاعدة CSS أخرى (مع الأقواس) مع الاختلاف الوحيد الذي تتداخل فيه مع قواعد CSS الأخرى.
media media-type (تعبير) {css-test-selector {property1: value1؛ الخاصية 2: القيمة 2 ؛ }}
في هذا الهيكل العناصر الموجودة داخل القاعدة @ وسائل الإعلام العمل الوحيد عندما نوع من وسائل الإعلام المحدد أنه تم اكتشافه بنجاح. نوع الوسائط المختارة ، يمكنك تحديد الخصائص من حيث الأبعاد.
اكتشف كيفية تطبيق واجهة وتجربة المستخدم لورد
القاعدة media يكتشف لك نوع الشاشة التي يتم من خلالها زيارة موقع الويب الخاص بك ويختار القواعد التي تناسب هذا النوع من الشاشات. جميع المتصفحات الرئيسية قد دمجت القاعدة بالفعل media.
فيما يلي قائمة بمعلوماتك: الكروم , سفاري, برنامج فايرفوكس, IE, العمل et حافة.
تحديد الشاشات المستهدفة
إذا كنت تريد تعديل ملف وورد موضوع موجود ، يرجى عمل نسخة احتياطية من CSS لهذا الأخير حتى تتمكن من العودة إذا لزم الأمر.
اقرأ أيضا مقالتنا على كيفية تحميل تدريجيا الفيسبوك و Disqus التعليقات
كما رأينا في هيكلها ، لتحديد نوع الشاشة ، يجب إعادة توجيهها media نوع الشاشة المستهدفة. فيما يلي قائمة بالأنواع المختلفة للشاشات:
- من جميع : لجميع أنواع الشاشات أو للأبعاد المحددة في التعبير
- شاشة : لجميع الشاشات ، سواء الجوّال أو الكمبيوتر اللوحي أو الكمبيوتر المحمول أو سطح المكتب
- طباعة : للطابعات ، إذا كنت تريد أنماطًا معينة للصفحات التي يمكن طباعتها
- خطاب : لقارئات الشاشة ، إذا كنت تريد أنماطًا للمكفوفين.
هناك أيضًا عوامل تشغيل يمكنك وضعها قبل نوع الشاشة ؛ مثل ليس لعرض أنماط للشاشات من نوع مختلف عن تلك المحددة أو فقط لتطبيق الأنماط على الشاشات المحددة فقط. لذلك يمكنك الحصول على:
media الشاشة فقط
تحديد أنماط أبعاد الشاشة
يمكنك استخدام التعبير لتقديم مزيد من التفاصيل حول خصائص الشاشة. بعد media أدخل و متبوعًا بالتعبير. إذا كنت تستخدم عدة تعبيرات ، فيجب الفصل بينها جميعًا بـ و . هنا مثال على الهيكل:
شاشةmedia only and (max-width: 640px) {selector-css-example {/ * CSS المعتاد هنا * /}}
في هذا المثال أستخدم ماكس العرض بقيمة 640px. هذا لتعيين أقصى عرض للشاشة لحجم iPhone أو هاتف ذكي صغير يعمل بنظام Android. باستخدام هذا النوع من البنية ، يمكنك التحكم في كيفية ظهور موقع الويب الخاص بك على الأجهزة المختلفة. فيما يلي قائمة بالخصائص المتعلقة بالأبعاد التي يمكنك استخدامها فيها التعبير :
اكتشف أيضا لدينا شنومكس كبار المسئولين الاقتصاديين وردبريس الإضافات لتحسين كبار المسئولين الاقتصاديين من موقع الويب الخاص بك
- mفي العرض et ماكس العرض : الحد الأدنى والحد الأقصى للعرض المطلوب لعرض الأنماط الموجودة في القاعدة على التوالي media. لا يتم عرض بكسل وأنماط أخرى.
- mفي ارتفاع et الحد الأقصى للطول : على التوالي الحد الأدنى والحد الأقصى للارتفاع المطلوبين لعرض الأنماط الموجودة في القاعدة media. لأن معظم الشاشات مصممة لإلغاء الصفحات عموديا ، والخصائص مين ارتفاع et الحد الأقصى للطول وتستخدم قليلا.
فيما يلي قائمة بأحجام الشاشة لبعض المحطات:
- اي فون: 640px
- الآيباد: 1024 بكسل
- الأجهزة اللوحية: 1366 بكسل
- هاتف Android الذكي: 640 بكسل ، 720 بكسل ، 854 بكسل ، 960 بكسل
- Android كبير جدًا: 1024 بكسل ، 1066 بكسل
- هاتف ويندوز: 480
- هاتف Windows كبير: 768 بكسل
- الصغار والكبار: 320 بكسل
- Ultrabook / أجهزة الكمبيوتر المحمولة: 1366 بكسل
- أجهزة الكمبيوتر المكتبية والتلفزيونية: 1920 بكسل
هناك العديد من الخصائص الأخرى التي يمكنك استخدامها التعبير. على سبيل المثال ، إذا كنت تستهدف أجهزة كمبيوتر سطح المكتب أو شاشات التلفزيون القادرة على عرض صور بنسبة عرض إلى ارتفاع تبلغ 16:9 ، فيمكنك استخدام هيكل مثل هذا:
شاشةmedia only و (min-width: 1920px) و (device-Asp-ratio: 16/9) {selector-css-example {/ * CSS المعتاد هنا * /}}
للحصول على قوائم وأمثلة أكثر اكتمالاً ، راجع w3schools et موزيلا Developpers.
اختبار وظيفة استجابة لموقع الويب الخاص بك
أثناء تعديل أو بناء ملف وورد موضوع أو في النهاية ، إذا كنت تحب المفاجآت ، يجب عليك اختبار النتيجة لمعرفة ما إذا كانت مستجيبة في النهاية. تذكر أن Google تراقب مواقع الويب التي لا تستجيب.
انظر أيضا هذه ملحقات 10 WordPress لإنشاء علامات تبويب على مدونتك
إذا فشلت في الحصول على جميع الأجهزة المحمولة التي تستهدفها ، فهناك (لحسن الحظ بورصاتنا) عدد من الأدوات لمعرفة كيف يتكيف موقع الويب الخاص بك مع الشاشات المختلفة.
مباشرة في متصفح جهاز الكمبيوتر الخاص بك يمكنك استخدام نافذة رسزر كروم متصفح التمديد, ResponsiveResize, ResizeMe ou Firesizer. يوجد أدناه صورة لـ BlogPasCher في طريقة عرض التصميم المستجيبة والتي تأتي افتراضيًا مع Firefox.
هناك أيضًا مواقع مخصصة للمهمة:
يتميز هذا الموقع بخصوصية السماح لك باختيار أبعاد الشاشة بنفسك. انتبه إلى أن هذا الموقع يقوم بتحميل موقعك في إطار. لذلك إذا كان لديك وورد موضوع تم تصميمه بحيث لا يتم عرضه في إطار، لذا فمن المحتمل ألا يتم عرضه هنا.
باد نظرة خاطفة
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
هذا الموقع مفيد لاختبار موقع الويب الخاص بك على أحدث أجهزة Apple و iPad و iPhone. فقط أدخل عنوان URL الخاص بك. لاحظ أنه يخضع لنفس مشكلة الإطار مثل responseivepx.
في هذا الموقع ، يمكنك اختبار شاشتك على شاشات صغيرة وعلى طرز الهواتف القديمة التي تختارها على الجانب الأيمن من الشاشة. يمكنك أيضًا تكوين بعض خصائص الشاشة.
يعد هذا أحد أهم الاختبارات ، إن لم يكن أهمها. فقط أدخل عنوانك في الشريط وانقر فوق حلل لبدء الاختبار. بعد الاختبار ، تعرض الأداة تقريرًا ودرجة. إذا كان الاختبار إيجابيًا ، فهذا أفضل ، فلن تتم معاقبتك من قِبل Google.
إذا لم تكن مطورًا ، أنصحك قائمة من المواضيع ورد تستجيب للبدأ.
الموارد الموصى بها
اكتشف أيضًا الموارد الأخرى الموصى بها والتي ستساعدك على جذب الشركاء والمشتركين بشكل أفضل ، ولكن أيضًا لتحسين أمان موقع الويب الخاص بك.
- كيفية إنشاء روابط مخصصة دورات على وورد
- ملحقات 5 WordPress لإضافة مراجعات العملاء إلى مدونتك
- كيفية إنشاء عجلة الحظ لكوبونات على WooCommerce
- اكتشف أفضل الصفقات وكوبونات لمدونتك
وفي الختام
هنا ! أنت تعرف كل شيء يمكن معرفته حول كيفية جعل موقع الويب الخاص بك أو سمة WordPress تستجيب باستخدام القاعدة media من CSS3. إذا فاتنا سمة WordPress العزيزة عليك أو التي تفضلها ، فيرجى ترك رابط في القسم تعليقات CI-dessous.
ومع ذلك ، ستتمكن أيضًا من الرجوع إلى موقعنا RESSOURCES، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
نحن ندعوك أيضا إلى مشاركة على الشبكات الاجتماعية المختلفة.
...
