一,移动端宽度设置
viewport视图窗口,<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">,视窗宽度=设备宽度,默认缩放=1,不允许用户缩放。

二,flexbox,弹性盒子模型:
1,在元素的css中添加display:-webkit-flex就可以转换成弹性盒模型了,然后在多个子元素的CSS中添加flex:1/2/3,就可以让子元素按定义的比例1/2/3分配填满父元素。
2,混合划分:

子元素可以是固定宽度,也可以是定义flex值,灵活运用,常见于

图片采用固定宽度防止缩放失真,然后右边的文字采用弹性布局设置flex:1。
3,不定宽高的水平、垂直居中
CSS3方案:.myoff-wrapper{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%,-50%);
border-radius:6px;
background:#fff;
}
更好的flexbox方案:设置父元素,让子元素水平居中
.parent{
display:-webkit-flex;
justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
}
更多应用:


三,响应式布局:在不同设备不同分辨率下都有良好的用户体验

响应式布局方法是依靠媒体查询实现的:

媒体查询类型:screen(屏幕)、print(打印机)、handheld(手持设备)、all(通用)
常用媒体查询参数:width,height,device-width,device-height,orientation(检查设备处于横向lanscape还是竖屏portrait)

em:根据父元素的font-size为相对单位;
rem:根据html的font-size为相对单位。

[学习笔记]viewport定义,弹性布局,响应式布局的更多相关文章

  1. web前端学习(二)html学习笔记部分(9)-- 响应式布局

    1.2.23  响应式布局基础 1.2.23.1  响应式布局介绍 1.响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多终端 -- 而不是为每个终端做一个特定的版本.这个概 ...

  2. flex布局 响应式布局

    移动端页面开发流程   移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是objec ...

  3. CSS响应式布局学习笔记(多种方法解决响应式问题)

    在做web开发的工作中,会遇到需要我给页面根据设计的要求,进行响应式布局,这里跟大家分享下我对于响应式布局的解决方法: 我主要利用的是CSS3 媒体查询,即media queries,可以针对不同的媒 ...

  4. Css布局 响应式布局介绍

    1. 概念: 写一套css样式可以同时适配多个终端,是为解决移动互联网诞生的. 2. 作用: 面对不同的分辨率设备灵活性强,能够快捷解决多设备显示适应问题 3. 原理 媒体查询 ① 外联式媒体查询语法 ...

  5. web页面之响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  6. media screen 响应式布局(知识点)

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  7. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  8. 从零开始学 Web 之 移动Web(六)响应式布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 浅谈html5 响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...

随机推荐

  1. DTW-js版

    最近想试试语音识别,然后看到了DTW这个算法 主要参考:http://www.cnblogs.com/rockyf/articles/4519352.html function dtw(arr1, a ...

  2. 如何使用记事本编程,并生成exe

    1 新建一个txt文件,重命名为1.c 2 编程 3 打开VS2015 开发人员命令提示 4 找到1.c文件的位置,然后在VS2015 开发人员命令提示,输入cd 空格 位置,回车 cd C:\Use ...

  3. jquery中read与js中onload区别

    在JavaScript中,onload函数是最经常使用的,几乎涉及到JavaScript的童鞋都少不了要接触它.这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句,因为按照文档流的执行顺 ...

  4. 【LeetCode】4Sum 解题报告

    [题目] Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d  ...

  5. navigationController显示隐藏问题

    今天遇到设置: self.navigationController.navigationBarHidden= YES; 点击返回上一个UIViewController的时候这个时候这个navigati ...

  6. 使用IIS建立自己的网站、使用C#编写IIS模拟器,更好的理解Client和Server的relation

    如何在IIS服务器上搭建自己的网站呢,今天带着这问题进行简单的实践一下,并且准备模拟一下IIS服务器工作方式,把这个工作方式搞清楚有利于发展. 1.首先应该进入控制面板=>程序=>添加或删 ...

  7. javascript高级知识点——函数原型

    代码信息来自于http://ejohn.org/apps/learn/. 向函数的原型中添加方法 function Ninja(){} Ninja.prototype.swingSword = fun ...

  8. 十大算法 pagerank 傅里叶变换

    来源于最近阅读的一些链接 首先是介绍十大算法的 http://blog.jobbole.com/70639/ 然后是pageRank算法 http://blog.jobbole.com/23286/ ...

  9. Oracle EBS DBA常用SQL - 安装/补丁【Z】

    Oracle EBS DBA常用SQL - 安装/补丁 检查应用补丁有没有安装:select bug_number,last_update_date from ad_bugs where bug_nu ...

  10. unity读取Sqlite数据库

    using UnityEngine; using System.Collections; using Mono.Data.Sqlite; using System.Data; public enum ...