网页设计与制作（项目二--响应式页面制作）

靖簳

已于 2022-11-08 15:39:08 修改

阅读量1.3k

点赞数 1

分类专栏：网页设计与制作文章标签：前端 javascript html

于 2022-10-11 15:12:59 首次发布

本文链接：https://blog.csdn.net/qq_54350870/article/details/127263103

版权

网页设计与制作专栏收录该内容

3 篇文章 0 订阅

订阅专栏

政务网站制作要点

（一）响应式的制作

1.排列方式：导航：一行变为两行；水平结构：变成纵向排列；

2.隐藏显示：在某个宽度的时候，特定的标签显示或者隐藏；

3.尺寸变化：典型--->轮播部分，文字、行间距、图片的宽高都会变化以适应屏幕的尺寸；

4.面包（bread）导航，如北京大学的官方网站的导航部分（北京大学官网链接），缩小页面的情况下会出现三层面包导航结构

5.响应式布局：又称“自适应网页设计”，指可以自动识别屏幕宽度并作出相应调整的网页设计。

6.图片的响应式建议宽度100%，和框架一样宽且不要设置高度，保证程正比缩放。

7.浏览器插入img会此

所谓响应式布局就是一个网站能兼容多个终端（PC端、手机端、平板端）

响应式的界面要点：

（1）尺寸改变

（2）排列：水平->垂直

（3）内容取舍：显示--><--隐藏

目的：不用为每个终端做一个特定版本

优点：面对不同分辨率的设备灵活性强；一套页面即可解决多设备显示适应问题，成本较低且易于维护

缺点：兼容各种设备工作量大，开发效率低；代码累赘，会出现隐藏无用的元素加载时间长，多方面因素影响可能达不到好效果

6.媒体查询：

移动端
物理分辨率	逻辑分辨率
页面上，硬件分辨率	程序上，程序分辨率（开发时更注重）
iPhone12pro 1170*2530	iPhone12pro 390*844

（二）企业网站主要内容

1.首页

2.二级页面

3.详情页：点击导航进入进入页面

4.列表页：

5.联系我们

（三）基于重庆市人民政府网站制作的学习

（项目分析）

网站性质：政府门户官网；

作用：政务信息发布、宣传当地文化、政策、便民、办事；

（管理css相关工具）

1.scss:css预编译工具。高效管理和编辑css代码

（scss官网）

scss优势

（1）兼容css:sass完全兼容所有版本的css,可以按照css语法来写没有任何问题；

（2）特性丰富：相比传统css，sass新增了变量、循环、数组、函数等功能特性；

（3）行业认可：很多项目前端样式管理的首选语言，求职中的加分项！

2.Less:基于JavaScript的编译css工具

对于网站的基本要求：

1.字体大小：最小12px 14px 16px ；标题18-24px ；行间距统一

2.图片：必须清高清，不可变形

（四）媒体查询

媒体查询页面，<head></head>之间必须要有meta ,媒体查询是响应式设计的核心。常用的使用方法：

@media 媒体类型 and (媒体特性) { 具体样式 }

@media screen and ( max-width:480px )

{

.ads

{

display:none;

}

}

/* 当屏幕宽度最大为480px时，类为.ads的标签就隐藏 */

1.媒体类型 media type:描述在什么媒体（设备）上使用该样式，响应式布局上一般用all\screen

值	描述
all	用于所有设备
screen	用于电脑屏幕，平板电脑，智能手机等
print	用于打印机和打印预览
speech	应用于屏幕阅读器等发声设备

2.媒体特性 media features:描述了设备或浏览器环境的具体特征，负责查询这些特性是否存在，具体值为多少

每条媒体特性表达式都要用括号括起来

名称

简介

max-width

min-widtn

视窗（viewport）的最大/最小宽度，包括纵向滚动条的宽度

orientation

视窗的旋转方向：portrait处于纵向，即高度>=宽度

landscape处于纵向，即宽度>高度

3.逻辑操作符

运算符	简介
and	用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，还用于将媒体类型与媒体特征结合在一起
not	否定媒体查询，若使用not，则必须指定媒体类型
only	仅在整个查询匹配时才用于应用样式，若使用only，则必须指定媒体类型
，	将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，若列表中任何查询为true则整个media语句均返回true