English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS media queries enable you to format documents to display correctly on devices of different sizes.
Media queries allow you to customize the display of web pages for specific ranges of devices (such as smartphones, tablets, desktops, etc.) without changing the markup. Media queries consist of media types and zero or more expressions that match conditions with specific media features (such as device width or screen resolution).
Since media queries are logical expressions, they can be parsed as true or false. If the media type specified in the media query matches the type of the device displaying the document, and all expressions in the media query are satisfied, then the query result is true. When the media query is true, the relevant stylesheet or style rules are applied to the target device. This is a simple example of standard device media queries.
/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px) {
/* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px) {
/* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px) {
/* styles */
}
/* الأجهزة اللوحية وأجهزة iPad (العرض الأفقي والعمودي) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
/* styles */
}
/* الأجهزة اللوحية وأجهزة iPad (العرض العمودي) ---------- */
@media screen and (min-width: 768px){
/* styles */
}
/* الأجهزة اللوحية وأجهزة iPad (العرض الأفقي) ---------- */
@media screen and (min-width: 1024px){
/* styles */
}
/* الكمبيوترات المكتبية واللابتوبات ---------- */
@media screen and (min-width: 1224px){
/* styles */
}
/* الشاشات الكبيرة ---------- */
@media screen and (min-width: 1824px){
/* styles */
}اختبار النظر في‹/›نصيحة:الاستعلامات الوسيطة هي طريقة ممتازة لإنشاء تصميمات استجابة. باستخدام الاستعلامات الوسيطة، يمكنك تخصيص موقع الويب للمستخدمين الذين يستخدمون هواتف محمولة أو أجهزة لوحية وما إلى ذلك دون تغيير محتوى الصفحة الفعلي.
يمكنك استخدام استعلامات وسائل التصفح CSS لتغيير عرض الصفحة والعناصر ذات الصلة، مما يوفر أفضل تجربة مشاهدة للمستخدمين على الأجهزة المختلفة.
ستتغير قواعد النمط الخاصة بالعناصر المضمنة تلقائيًا بناءً على حجم الشاشة أو عرض النافذة. على سبيل المثال، إذا كان عرض النافذة أقل من 768 بكسل، فإنه سيغطي عرض النافذة 100 في المئة، وإذا كان عرض النافذة أكبر من 768 بكسل لكن أقل من 1024 بكسل، فإنه سيكون 750 بكسل، وهكذا.
.container {
margin: 0 auto;
background: #f2f2f2;
box-sizing: border-box;
}
/* الهواتف المحمولة (العرض الأفقي والعمودي) ---------- */
@media screen and (max-width: 767px){
.container {
width: 100%;
padding: 0 10px;
}
}
/* الأجهزة اللوحية وأجهزة iPad (العرض الأفقي والعمودي) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
.container {
width: 750px;
padding: 0 10px;
}
}
/* منخفض الجودة للكمبيوترات المكتبية واللابتوبات ---------- */
@media screen and (min-width: 1024px) {
.container {
width: 980px;
padding: 0 15px;
}
}
/* مكتبات عالية الدقة ولوحات الحاسوب ---------- */
@media screen and (min-width: 1280px) {
.container {
width: 1200px;
padding: 0 20px;
}
}اختبار النظر في‹/›ملاحظة:يمكنك استخدام CSS3 تغيير حجم الصندوقالخصائص، لإنشاء تخطيطات أكثر وضوحًا وسهولة.
يمكنك أيضًا استخدام استعلامات وسائل الاعلام CSS3 لجعل تخطيط موقعك المتعدد الأعمدة أكثر مرونة، وبقليل من التخصيص يمكنه التفاعل مع الأجهزة.
إذا كان حجم العرض أكبر أو مساوٍ لـ 768 بكسل، فإن قواعد النمط التالية ستقوم بإنشاء تخطيط عمودي، ولكن إذا كان أقل أو مساوٍ لـ 768 بكسل، فإنه سيتم تقديمه كعمود واحد.
.column {
width: 48%;
padding: 0 15px;
box-sizing: border-box;
background: #93dcff;
float: left;
}
.container .column:first-child{
margin-right: 4%;
}
@media screen and (max-width: 767px){
.column {
width: 100%;
padding: 5px 20px;
float: none;
}
.container .column:first-child{
margin-right: 0;
margin-bottom: 20px;
}
}اختبار النظر في‹/›