响应式布局有几种方法
响应式布局有的方法有:1、媒体查询;2、百分比【%】;3、vw或vh,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度;4、rem单位是相对于字体大小的html元素;5、flex弹性布局。
本文操作环境:宏基S40-51、Windows10家庭中文版
推荐:css视频教程
响应式布局有的方法有:
响应式布局方法一:媒体查询
使用@media
媒体查询可以针对不同的媒体类型定义不同的样式,特别是响应式页面,可以针对不同屏幕的大小,编写多套样式,从而达到自适应的效果。举例来说:
通过媒体查询,可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局,比如我们为不同分辨率的屏幕,设置不同的背景图片。比如给小屏幕手机设置@2x图,为大屏幕手机设置@3x图,通过媒体查询就能很方便的实现。
但是媒体查询的缺点也很明显,如果在浏览器大小改变时,需要改变的样式太多,那么多套样式代码会很繁琐。
响应式布局方法二:百分比%
比如当浏览器的宽度或者高度发生变化时,通过百分比单位,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。
height,width属性的百分比依托于父标签的宽高。但是,padding、border、margin等属性的情况又不一样
子元素的padding如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的width,而与父元素的height无关。
子元素的margin如果设置成百分比,不论是垂直方向还是水平方向,都相对于直接父元素的width
border-radius
不一样,如果设置border-radius为百分比,则是相对于自身的宽度
缺点
计算困难,如果我们要定义一个元素的宽度和高度,按照设计稿,必须换算成百分比单位。
各个属性中如果使用百分比,相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height,而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等,造成我们使用百分比单位容易使布局问题变得复杂。
所以,不建议用%来做响应式布局。
响应式布局方法三:vw/vh
css3中引入了一个新的单位vw/vh,与视图窗口有关,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度。 任意层级元素,在使用vw单位的情况下,1vw都等于视图宽度的百分之一。
与百分比布局很相似,但更好用。
响应式布局方法四:rem
rem单位是相对于字体大小的html元素,也称为根元素。 默认情况下,html元素的font-size为16px。所以此时1rem = 16px。
优化版
//动态为根元素设置字体大小 function init () { // 获取屏幕宽度 var width = document.documentElement.clientWidth // 设置根元素字体大小。此时为宽的10等分 document.documentElement.style.fontSize = width / 10 + 'px' } //首次加载应用,设置一次 init() // 监听手机旋转的事件的时机,重新设置 window.addEventListener('orientationchange', init) // 监听手机窗口变化,重新设置 window.addEventListener('resize', init)
理解:上面代码实现了,无论设备可视窗口如何变化,始终设置rem为width的1/10.即实现了百分比布局。就没有第一版的媒体查询那样僵硬。
以上代码需在dom之前写入(可放在head里面第一个script标签)
响应式布局方法五:flex弹性布局
弹性布局是一种十分方便的,只需要依赖于CSS样式的实现响应式布局的方式,也是最多用到的一种实现响应式的方法。
尤其是现在类似于某宝、某东一类的电商web站或者手机app的页面,利用弹性布局是都可以很轻松的实现的。
弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的“弹力”。
在父元素上,我们经常会用到的有关弹性布局的属性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ,这几个属性分别从 主轴的方向、是否换行、项目在主轴上的对齐方式、项目在交叉轴上的对齐方式、项目在多根轴线上的对齐方式来规范了项目在父元素中的弹性。
在子元素上,我们经常会用到的有关弹性布局的属性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ,这几个属性分别从 项目的排序、项目放大比例、项目缩小比例、项目占据主轴空间、单个项目在交叉轴上的对齐方式来规范了项目自身的弹性。
想了解更多编程学习,敬请关注php培训栏目!
Atas ialah kandungan terperinci 响应式布局有几种方法. 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

AI Hentai Generator
Menjana ai hentai secara percuma.

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

Cara Membuat Reka Letak Senarai Blog Responsif Menggunakan HTML dan CSS Dalam era digital hari ini, blog telah menjadi platform penting untuk orang ramai berkongsi pendapat dan pengalaman mereka. Dan untuk menarik lebih ramai pembaca, susun atur senarai blog yang cantik dan responsif adalah penting. Dalam artikel ini, kita akan belajar cara membuat susun atur senarai blog responsif yang mudah tetapi berfungsi menggunakan HTML dan CSS. Pertama, kita perlu menyediakan beberapa kod HTML asas. Berikut ialah struktur HTML susun atur senarai blog ringkas: <

Dengan populariti peranti mudah alih dan perkembangan teknologi, reka letak responsif telah menjadi salah satu kemahiran penting untuk pereka bentuk. Reka letak responsif direka bentuk untuk memberikan pengalaman pengguna terbaik untuk skrin dengan saiz yang berbeza, membolehkan halaman web melaraskan reka letaknya secara automatik pada peranti berbeza untuk memastikan kebolehbacaan dan kebolehgunaan kandungan. Memilih unit yang betul adalah salah satu langkah utama dalam reka bentuk susun atur responsif. Artikel ini akan memperkenalkan beberapa unit yang biasa digunakan dan memberikan cadangan untuk memilih unit. Piksel (px): Piksel ialah unit terkecil pada skrin Ia adalah unit mutlak dan tidak berubah secara automatik apabila saiz skrin berubah.

Kemahiran aplikasi penentududukan tetap HTML dalam reka letak responsif, contoh kod khusus diperlukan Dengan populariti peranti mudah alih dan peningkatan permintaan pengguna untuk reka letak responsif, pembangun telah menghadapi lebih banyak cabaran dalam reka bentuk web. Salah satu isu utama ialah cara melaksanakan penentududukan tetap untuk memastikan elemen boleh diperbaiki di lokasi tertentu pada halaman di bawah saiz skrin yang berbeza. Artikel ini akan memperkenalkan kemahiran aplikasi kedudukan tetap HTML dalam reka letak responsif dan memberikan contoh kod khusus. Kedudukan tetap dalam HTML adalah melalui atribut kedudukan CSS

Pertandingan rangka kerja susun atur responsif: siapakah pilihan terbaik? Dengan populariti dan kepelbagaian peranti mudah alih, reka letak responsif halaman web telah menjadi lebih penting. Untuk memenuhi keperluan peranti dan saiz skrin pengguna yang berbeza, adalah penting untuk menggunakan rangka kerja reka letak responsif semasa mereka bentuk dan membangunkan halaman web. Walau bagaimanapun, dengan begitu banyak pilihan rangka kerja di luar sana, kami tidak boleh tidak bertanya: yang manakah pilihan terbaik? Berikut akan menjadi penilaian perbandingan tiga rangka kerja susun atur responsif yang popular, iaitu Bootstrap, Foundation dan Tailwind.

Cara Membuat Reka Letak Blog Responsif Menggunakan HTML dan CSS Pada zaman Internet hari ini, blog telah menjadi platform penting untuk orang ramai berkongsi pengetahuan, pengalaman dan cerita. Mereka bentuk blog yang menarik dan responsif akan membolehkan kandungan anda dipaparkan dengan lebih baik pada saiz dan peranti yang berbeza, meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk mencipta reka letak blog responsif, sambil memberikan contoh kod khusus. 1. Struktur HTML Pertama, kita perlu membina struktur HTML asas blog. Berikut ialah a

Tutorial Reka Letak CSS: Cara Terbaik untuk Melaksanakan Reka Letak Responsif Dua Lajur Pengenalan: Dalam reka bentuk web, reka letak responsif ialah teknologi yang sangat penting yang membolehkan halaman web melaraskan reka letaknya secara automatik mengikut saiz skrin dan resolusi peranti pengguna, memberikan Lebih Baik pengalaman pengguna. Dalam tutorial ini, kami akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan reka letak responsif dua lajur yang mudah dan memberikan contoh kod khusus. 1. Struktur HTML: Pertama, kita perlu mencipta struktur HTML asas, seperti yang ditunjukkan di bawah: <!DOCTYPEht

Dengan populariti peranti mudah alih dan perkembangan pesat Internet, semakin ramai pengguna memilih untuk mengakses tapak web melalui telefon mudah alih dan tablet. Ini telah membawa kepada pembangunan dan aplikasi laman web susun atur responsif. Reka letak responsif ialah kaedah reka bentuk fleksibel yang melaraskan dan mengoptimumkan reka letak dan paparan kandungan tapak web secara automatik berdasarkan peranti dan saiz skrin pengguna. Artikel ini akan membincangkan kelebihan dan cabaran tapak web reka letak responsif. Pertama sekali, kelebihan terbesar tapak web reka letak responsif ialah ia boleh memberikan pengalaman pengguna yang konsisten. Tidak kira sama ada pengguna menggunakan komputer, telefon mudah alih atau peranti tablet, Internet

Cara menggunakan HTML dan CSS untuk mencipta reka letak paparan album foto responsif Reka letak paparan album foto ialah jenis susun atur halaman biasa dalam tapak web dan boleh digunakan untuk memaparkan gambar, foto, imej dan kandungan lain. Dalam persekitaran hari ini di mana peranti mudah alih popular, susun atur paparan album foto yang baik perlu mempunyai reka bentuk responsif yang boleh menyesuaikan diri dengan saiz skrin yang berbeza dan mempunyai kesan paparan yang baik pada peranti yang berbeza. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk mencipta reka letak paparan album foto responsif dan memberikan contoh kod khusus. Saya harap pembaca boleh lulus arahan
