C3响应式web设计

1、viewpoint（可视区域）

优点：面对不同分辨率设备灵活性强，解决多设备显示适应问题

缺点：工作量大，效率低下，代码冗余，会出现隐藏无用的元素

width：控制viewport的大小，可指定值

device-width：设备的宽度（单位缩放100%时的css像素）

initial-scale：初始化缩放比例，页面第一次load时的缩放比例

maxmurn-scale：允许用户缩放最大比例

minmurn-scale：允许哦用户缩放最小比例

user-scalable：用户是否可以手动缩放

网格试图

通常是12列，宽度为100%，浏览器大小伸缩时会自动调整

确保所有元素都有box-sizing：border-box；怪异盒模型

在每列指定class ="col-"用来定义有几个跨度

媒体查询

语法：@media only mediatype and | not（media feature）{css样式}

媒体类型：print 用于打印机盒打印预览

screen用于电脑屏幕，平板，手机等

device-height 定义输出屏幕可见高度

device-width 定义输出屏幕可见宽度

max-width 定义设备页面最大可见区域宽度

min-width 定义设备页面最小可见区域

偶人塔体on 定义输出设备中的页面可见高是否大于等于宽度

例： @media only screen and （max-width：500px）{

bady{ background-color : red; }

}可见区域最大为500px时 body背景色红色

C3响应式web设计-图片

max-width：100%；永远不会大于原始大小

background-size：contain；背景图按比例自适应

background-size：100% 100%；背景图覆盖整个区域

background-size：cover；保持比例铺满

不同设备显示不同图片也是可以设置的

基本布局方法---flex布局

display：flex；

flex-direction：row默认值，从做到右排列

flex-direction：row-reverse 从右到左排列

flex-direction：column 从上到下排列

flex-direction：column 从下到上排列

flex-wrap：nowrap 默认不换行，如果内容太多溢出容器

flex-wrap：wrap 单行容不下换行

flex-wrap：wrap-reverse 反方向换行

justify-conten：flex-start 默认株洲起点，无空隙

justify-conten：center居中，无空隙

justify-conten：flex-end主轴终点对齐无空隙

justify-conten：space-between 起尾无空隙，中间空隙相等

justify-conten：space-around 起尾空隙为中间空隙一半

justify-conten：space-evenly所有空隙相等

align-item属性（单行对齐）

align-items：stretch 拉伸到填满行高

align-items：flex-start 顶部与行七点对齐

align-items：center 项目在行中居中

align-items：fiex-end 项目在底部与行终点对齐

align-items：baseline 基线对齐

align-content属性（多行对齐）

align-content：stretch默认未设置项目尺寸，项目拉伸至填满交叉轴，设置了尺寸，项目尺寸不变，项目行拉伸

align-content：flex-start首行在交叉轴七点开始，行间无空隙

align-content：center首交叉与尾交叉距离相等

align-content：flex-end 尾行在交叉终点，无空隙

align-content：space-between 行间距相等，首位间距0

align-content：space-around 行间距相等，收尾间距尾中间的一半

align-content：space-evenly首位和行间距相等

项目属性flex-grow：0；扩张因子

flex-basis 为row/row-reverse时，与width同在，优先于width。为column或column-reverse时与height同在，优先于height，注：非auto优先。

flex-shrink：1；收缩因子

flex：上面简写

align-self用于覆盖容器的align-items。做对项目对齐处理为auto时，继承容器的align-items值，当容器无align-items时，属性值为strech.

order:0;数字越小，越在前

C3响应式web设计相关推荐

通过响应式web设计，使本站支持手机浏览
2019独角兽企业重金招聘Python工程师标准>>> 2014-01-28 14:49:14 现在越来越多的人通过手机来上网,手机由于屏幕尺寸的原因,当浏览为PC端浏览器设计的网页 ...
《响应式Web设计：HTML5和CSS3实践指南》——2.9节基于位置伪类的交替行样式
本节书摘来自华章社区<响应式Web设计:HTML5和CSS3实践指南>一书中的第2章,第2.9节基于位置伪类的交替行样式,作者(美) Benjamin LaGrone,更多章节内容可以访问 ...
十大响应式Web设计框架
2019独角兽企业重金招聘Python工程师标准>>> 本文将分享十款最佳的响应式Web设计,助你大大简化工作流程. Gumby Framework Gumby 2是建立在Sass基 ...
《响应式Web设计全流程解析》一1.2　静态设计稿舒适区
本节书摘来异步社区<响应式Web设计全流程解析>一书中的第1章,第1.2节,作者: [美]Stephen Hay 译者: 余果 , 等责编: 赵轩,更多章节内容可以访问云栖社区" ...
HTML5和CSS3响应式WEB设计指南译者序
"不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...
《移动优先与响应式Web设计》一上册移动优先
本节书摘来异步社区<移动优先与响应式Web设计>一书中的第2章,第2.1节,作者: [美]Luke Wroblewski , Ethan Marcotte 译者: 司徒卓恆责编: 赵轩, ...
响应式Web设计（一）：响应式Web设计的背景
2019独角兽企业重金招聘Python工程师标准>>> 不是专业前端,可2011年底至今大部分时间在做着一个前端开发工程师的事情,所以多少也有点总结,多少也有点"经验&qu ...
（转）响应式Web设计是大势所趋还是时代的产物
在你身上是否发生过如此一件事,就是在你休息的时间用浏览器最大化的看一些文章.玩一些网页游戏正入迷的时候,时间一点点的过去了,马上到了下午工作的时间了,却发现还差一点就看完,于是乎,你把浏览器缩小了一些 ...
《移动优先与响应式Web设计》一1.2 设备不同，功能不同
本节书摘来异步社区<移动优先与响应式Web设计>一书中的第1章,第1.2节,作者: [美]Luke Wroblewski , Ethan Marcotte 译者: 司徒卓恆责编: 赵轩, ...

C3响应式web设计

C3响应式web设计相关推荐

最新文章

热门文章