Responsif dalam HTML

Reka bentuk responsif dalam HTML ialah konsep yang sesuai dengan elemen HTML mengikut saiz peranti untuk setiap saiz skrin. Elemen tersebut sepatutnya kelihatan sempurna dalam setiap peranti seperti mudah alih, desktop atau tablet. Reka bentuk responsif ialah perkara di mana elemen dapat diselaraskan dengan cepat mengikut ruang yang tersedia dalam paparan paparan. Ia berdasarkan perkara seperti lebar port pandangan, saiz teks, imej responsif dan elemen lain. Pada masa kini, terdapat banyak teknik baharu yang terlibat dalam istilah reka bentuk responsif untuk menyempurnakan reka bentuk dengan penyemak imbas serta peranti yang berbeza. Pertanyaan media ialah salah satu bahagian terbaik, termasuk dalam reka bentuk responsif melalui CSS, yang memberitahu penyemak imbas untuk disesuaikan mengikut saiz peranti pengguna mereka.

Sintaks Digunakan dalam Reka Bentuk Responsif HTML

Reka bentuk responsif dalam HTML bergantung kepada banyak faktor; mari lihat mereka satu persatu:

1. Menetapkan Viewport: Sintaks Di Bawah digunakan untuk menetapkan viewport kepada paparan halaman pengguna, yang membantu penyemak imbas mengawal dimensi halaman web dan penskalaannya. Ia akan melaraskan elemen secara automatik mengikut saiz peranti yang berbeza dan skrin paparan mengikut peranti.

<meta initial-scale='1.0"'>

2. Imej Responsif: Setiap kali menambah beberapa imej pada halaman web kami, imej tersebut juga perlu dipaparkan dalam saiz yang betul pada setiap saiz skrin peranti.

<div class="section content">  <img  class="example lazy" src="/static/imghwm/default1.png" data-src="images.jpg" alt="Responsif dalam HTML" >
</div>

3. Tetapkan Sifat Lebar: Dengan bantuan CSS, kami boleh menetapkan lebar kepada 100%, jadi ia membantu untuk menjadikan elemen responsif dalam paparan paparan skrin.

width: 100%;

4. Menggunakan Harta Lebar Maks: sama seperti lebar, seseorang boleh menetapkan lebar maksimum elemen kepada 100 %, jadi ia akan membantu kami memaparkan semua elemen HTML kami dalam format responsif yang betul.

Max-width:100%;

5. Teks Responsif: Sama seperti elemen lain, adalah perlu untuk menjadikan teks juga bertanggungjawab dalam semua peranti mengikut saiz skrinnya. Ia boleh ditetapkan dengan menggunakan VW, yang membantu pengguna menetapkan lebar port pandangan untuk melaraskan saiz teks mengikut skrin peranti dengan mudah. Sintaks ini menerangkan bahawa viewport dirujuk sebagai saiz paparan penyemak imbas. Di sini 1 VW adalah bersamaan dengan 1 % sebenar lebar port pandangan.

<h4 id="Text">Text</h4>

6. Menggunakan Media Pertanyaan: Pertanyaan media memainkan peranan penting dalam reka bentuk responsif untuk menjadikan teks, imej dan elemen lain lebih responsif untuk saiz peranti yang berbeza untuk saiz penyemak imbas yang berbeza. Terdapat pelbagai rangka kerja yang tersedia pada masa kini untuk menjadikan halaman web kami lebih responsif. Mereka seperti:

• Lembaran Gaya Responsif: rangka kerja ini membantu kami menggunakan rangka kerja helaian gaya yang berbeza seperti W3.CSS, yang mengambil peranan utama semasa mencipta reka bentuk responsif. Secara lalai, ia menyokong reka bentuk yang mengutamakan mudah alih. Ia mudah dipelajari & dikembangkan.
• Bootstrap: Ia adalah rangka kerja paling popular yang berkembang pesat dan tersedia secara percuma kepada pengguna. Ia lebih mesra pengguna berbanding rangka kerja lain kerana ia berdasarkan bahasa pembangunan web seperti HTML, CSS dan jquery, yang membantu menjadikan halaman web lebih responsif.
• CSS Responsif Terkini: Ia menyokong pelbagai jenis penyemak imbas serta semua jenis peranti seperti telefon pintar, tablet, komputer riba, dll.

Contoh Pelaksanaan Responsif dalam HTML

Di bawah ialah contoh Responsif dalam HTML.

Contoh #1

Dalam contoh ini, kami menetapkan viewport dalam kod HTML dan juga menjadikan imej responsif.

Kod HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<h2 id="Responsive-Design-by-setting-Viewport">Responsive Design by setting Viewport</h2>
<p>Setting specific width to the screen which will adjust screen as per device on which we are going to display our webpage.</p>
<img  class="example lazy" src="/static/imghwm/default1.png" data-src="images.jpg" alt="Responsif dalam HTML" >

Output pada Desktop atau Skrin Komputer Riba:

Output pada Peranti Mudah Alih:

Output pada Tablet:

Contoh #2

Dalam Contoh 2, kami menjadikan skrin responsif menggunakan pertanyaan media. Itu akan membantu kami menjadikan halaman web responsif dengan menyokong pelbagai penyemak imbas serta pada pelbagai peranti juga dengan menggunakan kod:

Kod HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}
.top {
background-color:#00ff00;
padding:20px;
float:left;
width:30%;
}
.middle {
background-color:#800000;
padding:20px;
float:left;
width:40%;
color:white;
}
.bottom {
background-color:#00ffff;
padding:20px;
float:right;
width:30%;
}
@media screen and (max-width:800px) {
.top, .middle, .bottom {
width:100%;
}
}
</style>


<h2 id="Responsive-Design-in-HTML-using-Media-Queries">Responsive Design in HTML using Media Queries</h2>
<p>We will see web page on different devices by resizing browser window</p>
<div class="top">
<h4 id="First-Content-Part">First Content Part</h4>
<img  src="/static/imghwm/default1.png" data-src="images.jpg" class="lazy" alt="Responsif dalam HTML" >
</div>
<div class="middle">
<h4 id="Second-Content-Part">Second Content Part</h4>
<img  src="/static/imghwm/default1.png" data-src="images.jpg" class="lazy" alt="Responsif dalam HTML" >
</div>
<div class="bottom">
<h4 id="Third-Content-part">Third Content part</h4>
<img  src="/static/imghwm/default1.png" data-src="images.jpg" class="lazy" alt="Responsif dalam HTML" >
</div>

Output pada Paparan Desktop:

Output pada Peranti Mudah Alih: Ke dalam peranti mudah alih, skrin output akan boleh ditatal jadi untuk melihat keseluruhan halaman web, kita perlu menatal ke bawah pada skrin.

Output pada Peranti Tablet: Output yang sama akan dilaraskan mengikut Saiz Peranti Tablet.

Contoh #3

Mari lihat satu lagi Contoh 3 menggunakan bootstrap, CSS Standard dan pertanyaan media:

Kod HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.options {
float:left;
width:20%;
text-align:center;
}
.options a {
background-color:#e5e5e5;
padding:8px;
margin-top:7px;
display:block;
width:100%;
color:black;
}
.main {
float:left;
width:60%;
padding:0 20px;
}
.course {
background-color:#ff8000;
color:white;
float:left;
width:20%;
padding:10px;
text-align:center;
}
#header
{
background-color:#003333;
padding:10px;
text-align:center;
color:white;
}
#footer{
background-color:black;
text-align:center;
padding:10px;
margin-top:7px;
color:white;
@media only screen and (max-width:620px) {
/* For mobile phones: */
.options, .main, .course {
width:100%;
}
}
}
</style>


<div id="header">
<h1 id="Welcome-to-EDUCBA">Welcome to EDUCBA</h1>
</div>
<div style="overflow:auto">
<div class="options">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Career</a>
<a href="#">Contact us</a>
</div>
<div class="main">
<h2 id="WHO-IS-EDUCBA">WHO IS EDUCBA?</h2>
<p> Learn Graphic designing, Animation, Game Development, Video Editing & more with our Online Certification Courses</p>
</div>
<div class="course">
<h3 id="b-Courses-b"><b>Courses</b></h3>
<p>Data science</p>
<p>Marketing</p>
<p>Excel</p>
<p>Design</p>
</div>
</div>
<div id="footer">© 2019 - EDUCBA. ALL RIGHTS RESERVED</div>

Output on Laptop Screen:

Output on Mobile Devices:

Output on Tablet:

Conclusion

Responsive design is done by using HTML and CSS language to make web page more responsive and user-friendly, which display properly on each and every device size. It uses the latest framework like W3.CSS, bootstrap and some media queries code.

Atas ialah kandungan terperinci Responsif dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!