响应式网站实现原理

最新推荐文章于 2024-02-07 09:30:00 发布

原创最新推荐文章于 2024-02-07 09:30:00 发布 · 396 阅读

CC 4.0 BY-SA版权

一、媒体查询

媒体查询可以让我们根据显示器的特性为其设置不同的css样式，媒体查询是由媒体类型和一个或者多个检测媒体的表达式组成，媒体检测的媒体特性可以是width 、height 和color等，使用媒体查询可以在不改变页面的情况下，为特定的一些设备定制出不同的效果。

媒体查询的方式

实际操作：对媒体提出询问（表达式）开始，如果表达式结果为真（符合条件），媒体查询中的css被应用，如果表达式结果为假（不符合），媒体查询里面的css内容将会被媒体查询忽略

screen 是媒体类型里的一种，CSS2.1 定义了 10 种媒体类型 and 被称为关键字，其他关键字还包括not(排除某种设备)，only(限定某种设备) (min-width: 400px) 就是媒体特性，其被放置在一对圆括号中

媒体查询结构

/* 查询视口大小在 400px-600px 之间时设置div的宽度为300px 背景颜色为纯黄色 */


@media screen and(min-width:400px) and (max-width:600px){
    div{
        width:300px;
        bakcground:yellow;
    }
}

默认样式  注意：默认样式要写在最前面

/* 打印样式 */
@media print {}

/* 手机等小屏幕手持设备 */
@media screen and (min-width: 320px) and (max-width: 480px) {}

/* 平板之类的宽度 1024 以下设备 */
@media only screen and (min-width: 321px) and (max-width: 1024px) {}

/* PC客户端或大屏幕设备: 1028px 至更大 */
@media only screen and (min-width: 1029px) {}

/* 竖屏 */
@media screen and (orientation:portrait) {
对应样式
}

/* 横屏 */
@media screen and (orientation:landscape){
对应样式
}

二、Responsive Web Design 响应式网页布局

常见的布局方式

固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；

可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；

弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；

混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。

布局响应：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先（从pc端开始向下设计）；移动优先（从移动端向上设计）；无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点）

响应式布局的特点：

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

meta标签的设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码的几个参数解释：

width = device-width：宽度等于当前设备的宽度 initial-scale：

初始的缩放比例（默认设置为1.0） minimum-scale：

允许用户缩放到的最小比例（默认设置为1.0） maximum-scale：

允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- ios7.0版本以后，safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- 可选default、black、black-translucent -->