网站页面自适应的实现方式

网站页面自适应布局

自适应不同屏幕方式

简易场景
页面居中，元素宽度使用百分比匹配
复杂场景
1.可以编写几套css代码，再利用媒体查询技术，在不同屏幕下显示加载不同代码，代码工作量大，但比较好维护
2.响应式布局
1）栅格布局（媒体查询 + 百分比）
2）flex布局

一、媒体查询
媒体查询原理：通过匹配不同屏幕设备的特征,让不同特征下的CSS代码生效。

常用匹配特征 media features
width/height: 浏览器宽高
max-width：表示小于最大宽度时生效
min-width：表示大于最小宽度时生效
device-width/device-height: 设备屏幕分辨率宽高
resolution: 设备分辨率
orientation：portrait(纵向),高度大于等于宽度时，landscape(横向),高度小于宽度时
特征匹配操作符

@media (min-width: 1200px) and (orientation: landscape) {...}// 表示当浏览器宽度大于等于1200px且为横向时CSS代码生效

逗号分隔

@media (max-width: 500px), handheld and (orientation: landscape) {...}表示当浏览器宽度小于等于500px或者手持设备且为横向时生效

媒体查询引入

@media导入

@media screen and (max-width: 375px){.container{background: red;}
}

link 引入方式

<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

二、栅格布局
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。栅格布局随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
手机、平板、桌面
针对不同设备定义不同类

三、flex布局
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

任何一个容器元素都能指定成flex容器；块级元素：display:flex，行内元素也能使用flex布局: display:inline-flex;

容器的属性

1. flex-direction  决定主轴的方向row | row-reverse | column | column-reverse;（默认值）主轴为水平方向，起点在左端 | 水平方向，起点在右端 | 主轴为垂直方向，起点在上沿 | 主轴为垂直方向，起点在下沿
2. flex-wrap  是否换行nowrap | wrap | wrap-reverse;（默认值）不换行 | 第一行在上方 | 第一行在下方
3. flex-flow  是flex-direction属性和flex-wrap属性的简写形式
默认值row nowrap
4. justify-content 主轴上的对齐方式flex-start | flex-end | center | space-between | space-around（默认值）左对齐 | 右对齐 | 居中 | 两端对齐，项目之间的间隔都相等 | 每个项目两侧的间隔相等
5. align-items 交叉轴上对齐方式flex-start | flex-end | center | baseline | stretch交叉轴的起点对齐 | 终点对齐 | 中点对齐 | 第一行文字的基线对齐 | 默认值
6. align-content  定义了多根轴线的对齐方式 如果项目只有一根轴线，该属性不起作用
flex-start | flex-end | center | space-between | space-around | stretch
起点对齐 | 终点对齐 | 中点对齐 | 两端对齐 | 每根轴线两侧的间隔都相等 | 默认值

项目的属性

1. order 项目的排列顺序。数值越小，排列越靠前，默认为0
2. flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
3. flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
4. flex-basis 在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
5. flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
6. align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。auto | flex-start | flex-end | center | baseline | stretch

未完待续。。。

网站页面自适应的实现方式相关推荐

常见的5种网站页面布局方式及特点分析
互联网的世界里,网页是我们接触最多的内容展示平台(载体),各种风格设计及不同类型主题的网站数不胜数,笔者作为一名网页设计师,在关注内容本身的同时,也喜欢研究一下网站页面的设计特点,这不失为一种提升网页 ...
响应式网站和自适应网站是怎么样区分的？
很长一段时间以来,都以为响应式网站就是自适应网站,这是两个一样的概念.后来机缘巧合认识了一位前端大拿,给我好好上了一课,终于能把这两种网站前端表现形式给讲透了.现摘录如下: 1.响应式网站由来最开始 ...
iframe嵌套其它网站页面详解
iframe基本内涵通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm" ...
如何解决手机网站的自适应问题
说起手机网站的开发,最让新手脑大的问题,莫过于网站的自适应了.我当初也被这个问题困扰得抓耳挠腮,因此总结一些方法希望能帮到大家. 1.使用meta标签:viewport H5移动端页面自适应普遍使用 ...
HTML5期末大作业：个人网站设计——自适应个人相册展示留言博客模板(6页) HTML+CSS+JavaScript...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
SEO之网站页面优化策略
网站的页面优化,也即网页优化是对网页的程序.内容.版块.布局等多方面的优化调整,使其适合搜索引擎检索,满足搜索引擎排名的指标,从而在搜索引擎检索中获得的排名提升,增强搜索引擎营销的效果使网站的产品相关 ...
移动端页面自适应解决方案—rem布局(进阶版)
之前的一篇<手机端页面自适应解决方案-rem布局>随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem布局(进阶版) 该方案使用相当简单,把下面这 ...
java提交数据到另一个页面_JS实现把一个页面层数据传递到另一个页面的两种方式...
由于之前面试,被问到过此问题,所以今天特意整理了一下.由于自己技术水平有限,若存在错误,欢迎提出批评. 本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递 ...
[Apache]网站页面静态化与Apache调优（图）
---------------------------------------------------------------------------------------------------- ...

网站页面自适应的实现方式

网站页面自适应的实现方式相关推荐

最新文章

热门文章