70- استعلامات الوسائط CSS – أمثلة

salsabeel nourيونيو 14, 2024

0 37 6 دقائق

استعلامات الوسائط CSS – المزيد من الأمثلة

للق نظرة على بعض الأمثلة الأخرى على استخدام استعلامات الوسائط.

تعد استعلامات الوسائط تقنية شائعة لتقديم ورقة أنماط مصممة خصيصًا لأجهزة مختلفة. لتوضيح مثال بسيط، يمكننا تغيير لون الخلفية لأجهزة مختلفة:

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

استعلامات الوسائط للقياسات

في هذا المثال، نستخدم استعلامات الوسائط لإنشاء قائمة تنقل استجابة لحجم الشاشة، أي يتغير تصميمها وفقًا لأحجام الشاشات المختلفة.

/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

استعلامات الوسائط للأعمدة

استخدام شائع لاستعلامات الوسائط هو إنشاء تخطيط مرن. في هذا المثال، ننشئ تخطيطًا يختلف بين أربعة عمودين وعمودين وعمود كامل العرض، اعتمادًا على أحجام الشاشات المختلفة.

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

نصيحة: هناك طريقة أكثر حداثة لإنشاء تخطيطات الأعمدة، وهي استخدام CSS Flexbox (راجع المثال أدناه). ومع ذلك، لا يدعمها Internet Explorer 10 والإصدارات الأقدم. إذا كنت تتطلب دعم IE6-10، فاستخدم الأساليب العائمة (كما هو موضح أعلاه).

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

إخفاء العناصر باستخدام استعلامات الوسائط

استخدام آخر شائع لاستعلامات الوسائط هو إخفاء العناصر على أحجام شاشات مختلفة.tunesharemore_vert

/* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

تغيير حجم الخط باستخدام استعلامات الوسائط

يمكنك أيضًا استخدام استعلامات الوسائط لتغيير حجم خط عنصر على أحجام شاشات مختلفة.

/* If screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

/* If screen size is 600px wide, or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

معرض صور مرن

في هذا المثال، نستخدم استعلامات الوسائط جنبًا إلى جنب مع Flexbox لإنشاء معرض صور يستجيب لأحجام الشاشات المختلفة.

<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>

<!-- Header -->
<div class="header">
  <h1>Responsive Image Grid</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
  </div> 
   
  <div class="column">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg" style="width:100%">
    <img src="https://example.com/your-image.jpg"style="width:100%">
  </div>
</div>

</body>
</html>

يرجى استبدال "https://example.com/your-image.jpg" برابط الصورة الفعلي الذي تود استخدامه. تأكد من استخدام رابط ينتهي بامتداد الصورة الصحيح (مثل .jpg أو .png) وأن الرابط يؤدي إلى الصورة المطلوبة.

موقع ويب مرن

في هذا المثال، نستخدم استعلامات الوسائط جنبًا إلى جنب مع Flexbox لإنشاء موقع ويب يستجيب لأحجام الشاشات المختلفة، والذي يتضمن شريط تنقل مرنًا ومحتوى مرنًا.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Style the top navigation bar */
.navbar {
  display: flex;
  background-color: #333;
}

/* Style the navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}
</style>
</head>
<body>

<!-- Note -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
</div>

<!-- Header -->
<div class="header">
  <h1>My Website</h1>
  <p>With a <b>flexible</b> layout.</p>
</div>

<!-- Navigation Bar -->
<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<!-- The flexible grid (content) -->
<div class="row">
  <div class="side">
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>More Text</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div>
  </div>
  <div class="main">
    <h2>TITLE HEADING</h2>
    <h5>Title description, Dec 7, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>TITLE HEADING</h2>
    <h5>Title description, Sep 2, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>

<!-- Footer -->
<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>

الاتجاه: أفقي/رأسي

يمكن أيضًا استخدام استعلامات الوسائط لتغيير تخطيط الصفحة وفقًا لاتجاه المتصفح.

يمكنك الحصول على مجموعة من خصائص CSS التي ستطبق فقط عندما يكون عرض نافذة المتصفح أكبر من ارتفاعها، وهو ما يسمى اتجاه ” أفقي” (Landscape):

مثال

استخدم لون خلفية أزرق فاتحًا إذا كان الاتجاه في وضع أفقي:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

الحد الأدنى للعرض إلى الحد الأقصى للعرض

يمكنك أيضًا استخدام القيم (max-width: ..) و (min-width: ..) لتعيين حد أدنى للعرض وحد أقصى للعرض.

على سبيل المثال، عندما يكون عرض المتصفح بين 600 و 900 بكسل، قم بتغيير مظهر عنصر <div>:

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

استخدام قيمة إضافية: في المثال أدناه، نضيف استعلام وسائط إضافيًا إلى استعلام موجود بالفعل باستخدام الفصلة

/* When the width is between 600px and 900px or above 1100px - change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

salsabeel nourيونيو 14, 2024

0 37 6 دقائق

إخفاء العناصر باستخدام استعلامات الوسائط

تغيير حجم الخط باستخدام استعلامات الوسائط

معرض صور مرن

موقع ويب مرن

الاتجاه: أفقي/رأسي

الحد الأدنى للعرض إلى الحد الأقصى للعرض

salsabeel nour

69- استعلامات الوسائط CSS

71-نموذج صندوق Flexbox في CSS

مقالات ذات صلة

80-حاوية CSS Grid

15- الخط في CSS

54- تحويلات ثلاثية الأبعاد في CSS (CSS 3D Transforms)

78- تصميم الويب الاستجابي إطارات العمل Frameworks

اترك تعليقاً إلغاء الرد