响应式布局框架基本原理

2021-11-26
网站建设
1015
返回列表

网页的呼应式规划是一种规划实践,这种规划实践是跟着移动互联网时代的到来而逐渐鼓起的。跟着智能设备的鼓起,人们不再仅仅是经过个人电脑来访问网页,还有或许运用智能手机或许平板电脑,怎么适配各种不同尺度巨细,不同分辨率的设备,为网页规划带来了新的挑战。而呼应式规划便是一种解决方案,选用呼应式规划后,同样的一个网页会在不同设备上显现不同的布局,从而带来杰出的用户体验。沈阳网站制作大熊科技将通过本文将经过规划一个简略到不能再简略的呼应式结构来展现呼应式规划的基本原理。

一. 什么是呼应式规划
就像咱们能够用盒子模型的思想来看待网页一样,咱们同样能够运用“格子”的思想来看待网页的结构。咱们的眼睛在看东西时会遵从必定的形式,比方先从左往右看,然后从上往下看。比方先看文字,然后看标题,最后再阅读下面的文字等等。咱们将这样的规划称为网格布局,许多网站都遵从网格布局。
编写一个呼应式结构的原理便是经过创立一些通用的CSS类来定义所需要的款式,特别是操控元素宽度的技巧以及在页面上排布的方法。创立用于操控布局的CSS类是一种最佳实践。
二. 一个十分简略的呼应式结构
要完成呼应式规划,让网站依据浏览器的巨细来改动元素的巨细,肯定不能用肯定尺度,比方300px,必须运用百分比代表的相对尺度。在上一个学习笔记中咱们提到,假如将元素的尺度设置为百分比,那么该元素的巨细由离它最近的父元素巨细决议。呼应式结构的基本原理便是将一行(row)拆分为12个网格(grid),这样咱们就能够依据网格进行各种形状的布局规划。
三. 一些小技巧
1. 负空间
规划中有个概念叫“负空间”,即不包括任何内容的空间。假如你发现相邻的文字之间靠的太近,能够运用padding为元素增加内边距。内边距是元素之间创立负空间的绝佳手段。假如想在元素外边创立负空间,还能够运用外边距margin。
四. 媒体查询
能够运用媒体查询(media queries),使得CSS跟着页面的改动而产生改动。这样无论用户是运用手机还是台式机,都能够依据用户所用设备类型来改动页面的CSS。例如以下媒体查询将在屏幕小于300px时将段落中的文字布景颜色改为蓝色。
五. 适配各型浏览器
能够运用normalize.css来解决跨浏览器的兼容性。
一旦建立了HTML的结构,就能够考虑添加其他东西了,比方语义标签。对于页面上比较重要的信息,能够运用h1,h2和h3这样的元素来显现,同时也能够用语义元素区分页面的区域,比方header,footer等等。