B端产品响应式设计研究与分析
一、开发岗位种类和入门知识
开发岗位分成前端工程师和后端工程师。
后端开发工程师主要职责是平台设计、接口设计和功能实现，在日常工作中与我们设计师的交流不太多。
作为UI设计师的我们，在工作中最常打交道的就是前端工程师。前端开发主要工作是将UI设计师的高保真设计稿通过代码转化成可用的前端页面。前端开发又可细分为web前端开发、原生iOS开发和原生安卓开发。前端开发主要是用JS+CSS完成页面的构建。
这里简单介绍一下JS、CSS和HTML。
1. HTML
HTML（HyperText Markup Language）是超文本标记语言。超文本就是超越文本的意思，表示它不仅仅是简单的文本，它比普通的 .txt 文件要高级。这些记号超越了普通文本的标记，
它们对普通文本的修饰，构成了一套规则，这套规则就是 HTML。
以盖房子类比，必须定义这个房子有多长、多宽，每一块面积如何规划，例如哪里是卫生间、哪里是饭厅、哪里是卧室。将这些定义好，网页也就有了最基本的样子。
2. CSS
CSS（Cascading Style Sheets）是级联样式表。CSS 中的“样式”就是指外观。还以盖房为例，定义好了各个空间，房子也盖起来了，但还要装修，例如给客厅贴壁纸、给卧室铺地板。CSS 就是起装修作用的，要和 HTML —起配合使用。
3. JavaScript
JavaScript是一种脚本语言，主要用于前端页面的 DOM 处理。房子已经装修好，贴上了墙纸，铺上了地板，桌子、板凳、沙发都已经摆好，一切都很完美。可是，一个有生活情趣的住户时常要买些新家具，或者把茶几换个位置，这时，移动、添加、减少物件就只能靠 JavaScript 实现。
4. 前端开发CSS单位
前端开发人员所使用的CSS单位包含很多种，我们设计师只需要了解所有单位分成两类，绝对单位和相对单位。网页设计中最常使用的单位px像素，就是一种绝对单位。
绝对单位
绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。设置宽度为2px，不管屏幕变大还是变小都始终显示2px。
相对单位
相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。
二、布局种类介绍
1. 固定&静态布局
概念
页面保持固定的宽度，不会根据浏览器或显示器的宽度大小而变化。开发使用像素这种绝对单位作为单位，页面按照精确像素展示。
固定布局属于前20年的技术产物，由于当时的科技水平有限，使用的纯平显示器尺寸类型都较固定，所以当时很多网页都使用的是固定布局。
优点
设计简单，不需要考虑屏幕尺寸的限制，使用一种固定的尺寸进行设计即可。
开发简单，不需要考虑屏幕尺寸的适应问题。
缺点
小屏幕时需要左右滚动才能看到全部内容，大屏幕时两侧留白较多，空间浪费。
代表案例
目前部分网页依然会使用固定布局设计开发，常见于一些新闻门户类网站，这一类网页以大量的图片和文字资讯为主，如：新浪网、中华网
设计建议
固定布局形式适合一些新闻门户类等文字内容很多的网站，设计师在设计过程中可以定义一种适合浏览的页面内容区宽度，通常设置为1200px，内容区域居中两侧空间留白。
2. 流式布局
概念
流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。网页中主要的划分区域的尺寸使用百分数。
页面中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置页面主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。
优点
布局保持不变，内容跟随页面宽度变化去做变化，内容会在大屏和小屏幕之间的宽度变化
而变化，能够适应大屏和小屏之间的显示。
缺点
内部字体无法跟随变化大小
数字前端工程师和web前端如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。