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 name="viewport" content="width=device-width, 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' src='images/example.svg' /></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 style="font-size:5vw">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"> <body> <h2>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 src="images.jpg" > </body>
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:
<head>
<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>
</head>
<body>
<h2>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>First Content Part</h4>
<img src="images.jpg">
</div>
<div class="middle">
<h4>Second Content Part</h4>
<img src="images.jpg">
</div>
<div class="bottom">
<h4>Third Content part</h4>
<img src="images.jpg">
</div>
</body>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:
<html>
<head>
<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>
</head>
<body>
<div id="header">
<h1>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>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><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>
</body>
</html>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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1663
14
1420
52
1315
25
1266
29
1239
24
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?
Feb 07, 2025 am 11:57 AM
Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
