响应式网页设计移动端页面布局

响应式网页设计

将弹性布局、弹性图片、媒体和媒体查询三种已有的开发技术整合起来，并命名响应式网页设计

媒体类型

常遇到的媒体类型是

All（全部）

Screen（屏幕）

Print（页面打印或打印预览模式）

实际上媒体类型不止这三种，W3C共列出10种媒体类型

值设备类型

All 所有设备

Braille 盲人用点字法触觉回馈设备

Embossed 盲人打印机

Handheld 便携设备

Print 打印用纸或打印预览视图

Projection 各种投影设备

Screen 电脑显示器

Speech 语音或音频合成器

Tv 电视机类型设备

Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端

媒体类型的引入方式

内部引入及样式设置

@media 媒体类型 and （媒体特性）{ CSS样式}

例：@media screen and （max-width：1200px） and (minx-width：800px）{样式代码…}

媒体类型为电脑屏幕,样式在屏幕宽度大于等于800px且小于等于1200px生效

and：同时满足这两者时生效，到达限定范围

css外部样式引用法：

link方法

only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器

and (max-width：500px) " />

课外知识：

visibility:hidden;隐藏保留原位置，直接在元素后面加hidden,也有同样效果；

display:none;隐藏但不会保留原位置。

最大宽度与最小宽度：

max-width:可以设置最大宽度，超出限制，则只显示最大宽度；

min-width:可以设置最小宽度，缩小超出最小宽度，则按照最小宽度显示并且会显示滚动条；

min只决定下限，max决定上限：一般用于给html设置最小宽度，以保证用户在x轴缩小页面时，页面不会塌陷出现异常，设置最小宽度，缩小时会出现滚动条，以保证页面正常显示。可结合京东pc端首页查看

如何设置全屏样式

百分比法：

要想盒子高度布满整屏高度，必须把他的父元素的高度都设置成100%

Vw& Vh

vw:可视区的宽度单位，100vw;把整个屏幕的宽度分成100份

vh:可视区的高度单位，100vh;把整个屏幕的高度分成100份

百分比%与vw、vh对比：

100vw，只是表示屏幕的宽度，只能展示电脑一屏的宽度即可视范围内，不能覆盖父盒子

100vh，只是表示屏幕的高度，只能展示电脑一屏的高度即可视范围内，不能撑满父盒子；

百分比才能占据整个盒子（固定的高度）

移动端页面布局

水平居中

行内元素：text-align: center;

块级元素：margin:0 auto;

也可通过绝对定位实现水平垂直居中：

盒子设置宽度情况下适用

设置固定宽度的第一种

.center {

width: 960px;

height: 960px;

position: absolute;

left: 50%;

top: 50%;

margin-left: -480px;(盒子高的一半)

margin-top:-480px;(盒子高的一半)

}

设置固定尺寸的第二种：针对IE低版本浏览器不支持css样式的时候

.center {

position: absolute;

left：0；

right:0;

top:0;

buttom:0;

margin:auto;

width:300px;

height:300px;

}

盒子没有设置宽度文本内容自适应块级元素

.content {

position: absolute;

left: 50%;

top: 50%;

transform: translateX(-50%) translateY(-50%);向左向上移动自身宽度的一半

Flex实现垂直居中

移动端开发中最佳的解决方案

父元素需要设置高度，子元素可不设宽高

.content {

display: flex;

justify-content: center;

align-items: center;

}

垂直居中

单行文本：line-height;

多行文本：通过padding实现，结合text-align:justify;

如盒子设置高度，文本内容垂直居中

表格方式：

第一种：

第二种：

响应式网页设计移动端页面布局相关推荐

20个响应式网页设计中的“神话”误区
关于响应式网页的重要性我们已经证实了很长时间了,现在是该把焦点放到如何做出好的响应式网页设计的时候了.一起来看看吧! 虽然很多人都在谈论响应式网页,但并不是每个人都知道他们在说什么.很多时候你看到网上 ...
响应式网页设计的20个误区
响应式网页已经成为当下比较主流的设计形式,似乎每一个人都在谈论,但实际上并不是每一个人都真的懂得.以下总结了在进行响应式网页设计时的20个误区,你可以看看自身是否存在入其中所说的问题. 1.响应式网页 ...
css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度文章目录 html响应式网页设计:自动适应屏幕宽度背景一."自适应网页设计"的概念二.允许网页宽度自动调整-使用meta标签:vie ...
html响应式布局是什么,什么是响应式网页设计？响应式布局的实现原理
概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不 ...
html响应式布局平移,响应式网页设计、响应式布局的实现原理
概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不 ...
设计师必读的15个响应式网页设计教程
@陈子木响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念,随后席卷前端和设计领域,成为了如今网页设计的大趋势.正如同Ethan所说:"响应式网站设计提 ...
响应式网页设计应该注意的9个原则
响应式网站越来越受到大家的欢迎,有利也有弊的因素.它没有固定的页面尺寸.没有毫米或英寸,没有任何物理限制,让人感到无从下手.下面就和大家分析如何运用响应式web设计的各项基本原则来实现.为了简单起见, ...
用三个步骤实现响应式网页设计
写在前面的话:随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大.如何在多种设备上进行跨端的界面适配呢?我们可以利用CSS3的Media Query来实现.本文主要介绍了移动开 ...
《响应式网页设计》系列分享专栏
2019独角兽企业重金招聘Python工程师标准>>> <响应式网页设计>已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/ ...

响应式网页设计移动端页面布局

响应式网页设计移动端页面布局相关推荐

最新文章

热门文章