187 lines
7.7 KiB
Markdown
187 lines
7.7 KiB
Markdown
|
---
|
|||
|
|
title: Breakpoints
|
|||
|
|
localeTitle: نقاط
|
|||
|
|
---
|
|||
|
|
## نظرة عامة
|
|||
|
|
|
|||
|
|
نقطة توقف CSS هي نقطة محددة يتغير فيها تخطيط موقع الويب ، بناءً على [استعلام الوسائط](https://guide.freecodecamp.org/css/css3-media-queries) تصبح نشطة.
|
|||
|
|
|
|||
|
|
بشكل عام ، يمكنك تحديد نقطة توقف عندما تريد إعادة تهيئة تخطيط موقع الويب إلى حجم إطار عرض المستعرض ؛ في الغالب ، إلى عرض إطار العرض.
|
|||
|
|
|
|||
|
|
على سبيل المثال ، إذا كان محتوى موقعك الإلكتروني يبدو رائعًا على إطار عرض ضيق (كما هو الحال في متصفح الهاتف الذكي) ، إلا أنه يبدأ في الظهور على شاشات أكبر حجمًا (على سبيل المثال ، قد يكون حجم الخطوط صغيرًا جدًا ويصعب قراءته) ، قد ترغب في تقديم نقطة توقف جديدة للشاشات الأكبر التي تجعل الخطوط أكبر:
|
|||
|
|
|
|||
|
|
يمكن اعتبار CSS Breakpoints أساس تصميم الويب المتجاوب لأنه يحدد كيفية تصرف المحتوى أو يتم ترتيبه في عرض / مقياس جهاز مختلف يسمح لك بعرض أفضل تخطيط ممكن للمستخدم.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## ضبط نقاط الاستراحة
|
|||
|
|
|
|||
|
|
يتم تعيين breakpoints بشكل واسع على أساس أي مما يلي.
|
|||
|
|
|
|||
|
|
* نقاط التوقف حسب عرض الجهاز.
|
|||
|
|
* نقاط التوقف على أساس المحتوى.
|
|||
|
|
|
|||
|
|
### نقاط التوقف حسب عرض الجهاز
|
|||
|
|
|
|||
|
|
من الواضح تمامًا أن جميع أجهزتنا لا تمتلك نفس عرض / أحجام الشاشة. هو الآن قرار تصميم لتضمين مجموعة من أجهزة معينة ورمز قواعد css وفقًا لذلك. لدينا بالفعل أجهزة كافية للقلق ، وعندما يخرج جهاز جديد بعرض مختلف ، فإن الرجوع إلى CSS الخاص بك وإضافة نقطة توقف جديدة من جديد يستهلك الكثير من الوقت.
|
|||
|
|
|
|||
|
|
وهنا مثال على ذلك
|
|||
|
|
|
|||
|
|
`/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
|
|||
|
|
|
|||
|
|
/* Portrait */
|
|||
|
|
|
|||
|
|
@media only screen
|
|||
|
|
|
|||
|
|
and (min-device-width: 375px)
|
|||
|
|
|
|||
|
|
and (max-device-width: 667px)
|
|||
|
|
|
|||
|
|
and (-webkit-min-device-pixel-ratio: 2)
|
|||
|
|
|
|||
|
|
and (orientation: portrait) {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Landscape */
|
|||
|
|
|
|||
|
|
@media only screen
|
|||
|
|
|
|||
|
|
and (min-device-width: 375px)
|
|||
|
|
|
|||
|
|
and (max-device-width: 667px)
|
|||
|
|
|
|||
|
|
and (-webkit-min-device-pixel-ratio: 2)
|
|||
|
|
|
|||
|
|
and (orientation: landscape) {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ----------- Google Pixel ----------- */
|
|||
|
|
|
|||
|
|
/* Portrait */
|
|||
|
|
|
|||
|
|
@media screen
|
|||
|
|
|
|||
|
|
and (device-width: 360px)
|
|||
|
|
|
|||
|
|
and (device-height: 640px)
|
|||
|
|
|
|||
|
|
and (-webkit-device-pixel-ratio: 3)
|
|||
|
|
|
|||
|
|
and (orientation: portrait) {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Landscape */
|
|||
|
|
|
|||
|
|
@media screen
|
|||
|
|
|
|||
|
|
and (device-width: 360px)
|
|||
|
|
|
|||
|
|
and (device-height: 640px)
|
|||
|
|
|
|||
|
|
and (-webkit-device-pixel-ratio: 3)
|
|||
|
|
|
|||
|
|
and (orientation: landscape) {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
> مع هذا النهج ، سوف ينتهي بك الأمر وجود قائمة ضخمة من الاستفسارات الإعلامية.
|
|||
|
|
|
|||
|
|
### نقاط التوقف على أساس المحتوى
|
|||
|
|
|
|||
|
|
هذا هو الخيار المفضل أثناء إجراء أو كتابة قواعد نقطة الإيقاف. لأنه من الأسهل ضبط المحتوى وفقًا لتخطيط معين فقط عندما يتطلب تغييرًا.
|
|||
|
|
|
|||
|
|
`@media only screen (min-width: 768px){
|
|||
|
|
...
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
> تعني نقطة الإيقاف هذه أنه سيتم تطبيق CSS عندما يكون عرض الجهاز 768 بكسل وما فوق.
|
|||
|
|
|
|||
|
|
#### يمكنك أيضًا تعيين نطاق بنقاط توقف ، بحيث لا يتم تطبيق CSS إلا ضمن هذه الحدود.
|
|||
|
|
|
|||
|
|
`@media only screen and (min-width: 768px) and (max-width: 959px){
|
|||
|
|
|
|||
|
|
...
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
**ملحوظة** حاول دائمًا إنشاء نقاط توقف استنادًا إلى المحتوى الخاص بك وليس إلى الأجهزة. تقسيمها إلى عرض منطقي بدلاً من عرض عشوائي والاحتفاظ بها إلى عدد يمكن إدارتها ، لذلك يبقى التعديل بسيطة وواضحة.
|
|||
|
|
|
|||
|
|
تكون **نقاط التوقف CSS** مفيدة عندما تريد تحديث الأنماط استنادًا إلى حجم الشاشة. على سبيل المثال ، من جهاز قياس عرض 1200 بكسل وما فوق ، استخدم `font-size: 20px;` أو ما عدا ذلك ، استخدم `font-size: 16px;` .
|
|||
|
|
|
|||
|
|
ما بدأناه هو من عرض أكبر من 1200 بكسل ، وهو عرض شاشة الكمبيوتر المحمول الشائعة. قد تلاحظ أيضًا أننا قد ذكرنا "أكبر من" ، مما يعني أننا نستخدم طريقة مثل " **if-then** ".
|
|||
|
|
|
|||
|
|
دعونا نحولها إلى رمز CSS:
|
|||
|
|
|
|||
|
|
`.text1 {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
@media (min-width: 1200px) {
|
|||
|
|
.text1 {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
**للراحة لدينا،** وكتابة `.text1` التصميم الأساسي أولا ... ثم بعد ذلك سنقوم تحديد `@media` القواعد.
|
|||
|
|
|
|||
|
|
**تلميح** : قد تشاهد على إطار CSS مشترك يسمى "Bootstrap" ، حيث أنها تبنت **"min-width" وأعلى** في Bootstrap v4.0 ، بالمقارنة مع Bootstrap v3.0 القديمة باستخدام **"max-width" و down** . هذا مجرد **تفضيل** ، ولا حرج في قول " _هذا_ الحجم وأقل من" مقابل " _هذا_ الحجم وأكبر من".
|
|||
|
|
|
|||
|
|
من الجيد تمامًا استخدام `@media (max-width) {}` . هنا مثال:
|
|||
|
|
|
|||
|
|
`.text1 {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 1199px) {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
`// Normal, basic styles
|
|||
|
|
// that look great on small screens
|
|||
|
|
// but not on bigger screens
|
|||
|
|
body {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Define a new breakpoint, with a media query.
|
|||
|
|
// In this case, for when the viewport's width
|
|||
|
|
// is at least 512px wide.
|
|||
|
|
@media (min-width: 512px) {
|
|||
|
|
body {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
نقاط التوقف المستندة إلى محتوى بدلاً من الجهاز تكون أقل تعقيدًا. إليك مقتطف بسيط يتم `code 700px` عندما يكون عرض الجهاز أعلى من حجم شاشة الهاتف الذكي بحجم `code 700px` تقريبًا
|
|||
|
|
|
|||
|
|
`@media only screen and (min-width: 700px) {
|
|||
|
|
something {
|
|||
|
|
something: something;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
يمكنك أيضًا تعيين الحد الأدنى والحد الأقصى للعرض ، والذي يتيح لك إجراء التجارب باستخدام نطاقات مختلفة. هذا واحد تقريبا يطلق بين الهاتف smar وأكبر حجم سطح المكتب وأحجام الشاشة
|
|||
|
|
|
|||
|
|
`@media only screen and (min-width: 700px) and (max-width: 1500px) {
|
|||
|
|
something {
|
|||
|
|
something: something;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
#### معلومات اكثر:
|
|||
|
|
|
|||
|
|
* [نقاط توقف متجاوبة](https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints)
|
|||
|
|
* [مقالة freecodecamp.org حول استخدام نقاط توقف CSS](https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862)
|
|||
|
|
* [استعلامات الوسائط CSS3](https://guide.freecodecamp.org/css/css3-media-queries)
|
|||
|
|
* [تحديد نقاط التوقف](https://responsivedesign.is/strategy/page-layout/defining-breakpoints/)
|
|||
|
|
* [CSS-Tricks:media queries](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
|
|||
|
|
* [w3schools: نقاط توقف الجهاز النموذجية](https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp)
|