响应式网站详解 | 易学教程

（逆战班）
响应式网站能够让网页在不同的显示设备上自动调整网页的尺寸达到网站的完美显示、但是响应式网站设计的网页在不同的显示设备上的URL(网页链接、网页地址)却是完全一样的、再也不用为不同的显示设备上而设计不同终端的网站了。响应式网站设计在不同显示终端显示的都是一个域名一个网址、便于优化管理。

所谓“响应式网页设计(Responsive Web Design)”也就是自适应，就是可以自动识别屏幕宽度、并做出相应调整的网页设计。目前这种设计已经出现在越来越多的国内网站上，目前Google已经明确表明鼓励响应式网页设计。

响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。

响应式布局概念

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

响应式布局步骤

1.设置meta标签

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

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

2.CSS3 媒体查询
即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。也可以针对不同的分辨率设置不同的样式。

1024分辨率以上：PC端
1024 ~ 768 : pad pro
768 ~ 450 : pad mini , mobile 横屏
450分辨率以下： mobile 竖屏

3.设置多种试图宽度

方法：先去适配PC端 -> 过渡到pad -> 过渡到手机端 (推荐的)

/* 正常的样式 , 针对PC端的 */
-------CSS-------

/* 针对pad pro  */
@media all and (max-width:1024px){
}

/* 针对pad mini 和 mobile 横屏  */
@media all and (max-width:768px){
}

/* 针对 mobile 竖屏  */
@media all and (max-width:450px){
}

注意：

宽度需要使用百分比
#head { width: 100% } #content { width: 50%; }
处理图片缩放的方法

     img { width: auto; max-width: 100%; }

更多媒体查询的语法

常见的媒体类型：
all 用于所有设备
print 用于打印机和打印预览。
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备。

@media all and (min-width:500px){ }
@media all and (min-width:500px) and (max-width:800px){ }

orientation:portrait : 竖屏
orientation:landscape : 横屏
@media all and (orientation:portrait){}

来源：CSDN

作者：lnba1

链接：https://blog.csdn.net/weixin_38968316/article/details/104577101

标签

响应式网站设计

电脑