Rumah > Artikel > hujung hadapan web > Pengenalan ringkas kepada reka bentuk susun atur responsif untuk jQuery web mudah alih development_jquery

Pengenalan ringkas kepada reka bentuk susun atur responsif untuk jQuery web mudah alih development_jquery

WBOYasal: 2016-05-16 15:27:291242semak imbas

Reka bentuk susun atur responsif ialah reka bentuk yang bertindak balas kepada peranti pengguna mengikut resolusi skrin peranti pengguna. Ini bermakna sama ada pengguna menyemak imbas halaman web pada peranti mudah alih, tablet atau desktop, reka bentuk akan bertindak balas dengan sewajarnya kepada peranti dengan memaparkan reka letak tertentu berdasarkan peleraian skrin peranti tersebut.

Dokumentasi rangka kerja sebenarnya menggunakan gabungan rangka kerja Mudah Alih jQuery dan pertanyaan media CSS3 untuk melaksanakan reka bentuk responsifnya sendiri. Bagaimana ia bertindak balas terhadap resolusi skrin yang berbeza.

Tanpa gaya tersuai, grid kami akan menjadi reka letak 3 lajur merentas semua lebar skrin:

2015124141324766.jpg (830×56)

Dalam gaya tersuai kami, kami mahu grid ini menindih lebar sempit dan kemudian bertukar kepada reka letak 3 lajur standard. Pada lebar skrin yang sangat lebar, kami mahu lajur pertama mengambil 50% daripada lebar, seperti ini:

2015124141417389.jpg (827×56)

Untuk mencapai matlamat ini, kita perlu menyesuaikan nama kelas baharu, seperti "my-breakpoint".
Kelas ini digunakan untuk gaya berskop dalam pertanyaan media tersuai, ia hanya akan digunakan apabila kelas ini ditambahkan pada bekas grid. Untuk pakej pertanyaan media kami hanya mahu gaya 50em menggunakan syarat berikut.
Dalam pertanyaan media anda, gunakan unit EM dan bukannya piksel untuk memastikan pertanyaan media mengambil kira saiz fon sebagai tambahan kepada lebar skrin. Untuk mengira lebar skrin EMS, tambahkan 16 piksel pada lebar sasaran, iaitu saiz fon lalai untuk badan.

Bahagian HTML5:

<div class="ui-grid-b my-breakpoint">
 <div class="ui-block-a">Block A</div>
 <div class="ui-block-b">Block B</div>
 <div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->

Bahagian CSS3:

@media all and (max-width: 50em) {
 .my-breakpoint .ui-block-a, 
 .my-breakpoint .ui-block-b, 
 .my-breakpoint .ui-block-c,
 .my-breakpoint .ui-block-d,
 .my-breakpoint .ui-block-e { 
  width: 100%; 
  float:none; 
 }
}

Dalam pertanyaan media ini, kami menetapkan lebar kepada 100% dan menafikan atribut apungan kepada lebar skrin 50em. Peraturan ini digunakan untuk setiap jenis grid dengan menyusun grid pemilih semua kelas ui-block-a melalui ui-block-e gaya.
Itu menjadikan grid responsif dan menambahkan peraturan penggayaan tambahan untuk memudahkan setiap perubahan titik putus. Kami menggalakkan anda untuk mencipta seberapa banyak titik putus tersuai yang anda perlukan berdasarkan kandungan unik dan keperluan reka letak anda.

Tambah titik putus skrin lebar untuk melaraskan nisbah

Berdasarkan contoh di atas, kami boleh menambah titik putus tambahan untuk menetapkan lebar supaya lajur pertama adalah 50% lebar dan dua lagi 25% melebihi 75em (1200 piksel) dengan pertanyaan media lebar min tambahan untuk melaraskan lebar Sama seperti ini dalam gaya tersuai:

@media all and (min-width: 75em) {
 .my-breakpoint.ui-grid-b .ui-block-a { width: 49.95%; }
 .my-breakpoint.ui-grid-b .ui-block-b, 
 .my-breakpoint.ui-grid-b .ui-block-c { width: 24.925%; }
 .my-breakpoint.ui-grid-b .ui-block-a { clear: left; }
 }
}

NOTA: Tetapan lebar yang lebih sempit diperlukan untuk menyelesaikan isu pembundaran merentas platform.

Gunakan titik putus tersuai ui-responsif

Menggunakan titik putus lalai ini, tambahkan kelas responsif ui pada bekas grid, yang akan menjadikan tindanan di bawah 560px (35em). Jika titik putus ini tidak berfungsi untuk kandungan anda, kami menggalakkan anda menulis titik putus tersuai seperti yang diterangkan di atas.

<div class=" ui-grid-b ui-responsive ">

Ini ialah grid standard yang merupakan bekas grid kelas responsif yang dibuat oleh ui-responsif (tindak balas antara muka, kelas tersuai, titik putus saya dalam contoh di atas)

Contoh:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>responsive-grid demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
 <style>
  @media all and (max-width: 35em) {
  .my-breakpoint .ui-block-a, 
  .my-breakpoint .ui-block-b, 
  .my-breakpoint .ui-block-c,
  .my-breakpoint .ui-block-d,
  .my-breakpoint .ui-block-e { 
   width: 100%; 
   float:none; 
  }
 }
 
 @media all and (min-width: 45em) {
  .my-breakpoint.ui-grid-b .ui-block-a { width: 49.95%; }
  .my-breakpoint.ui-grid-b .ui-block-b, 
  .my-breakpoint.ui-grid-b .ui-block-c { width: 24.925%; }
 }
 </style>
</head>
<body>
 
<div data-role="page">
 <div data-role="header">
  <h1>Responsive Grid Example</h1>
 </div>
 <div data-role="content">
  <div class="ui-grid-b my-breakpoint">
   <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
   <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
   <div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
  </div>
</div>
 
</body>
</html>

2015124141513710.jpg (832×333)

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk melintasi kandungan semua sel dalam Jadual menggunakan kemahiran JS dan jQuery_javascriptArtikel seterusnya：Bagaimana untuk melintasi kandungan semua sel dalam Jadual menggunakan kemahiran JS dan jQuery_javascript

Artikel berkaitan

Lihat lagi