响应式布局笔记

一. 布局设计

  1. 固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；
  2.  可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；实现成本最低，但拓展性比较差；
  3. 弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；
  4. 混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。

参考https://www.w3cschool.cn/responsive/8w9adozt.html

总结：对于通栏，大于等于2栏的等分排版建议采用弹性布局；大于等于2栏的非等分排版建议采用混合布局；

二.布局响应

布局响应，对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）；

无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点）， 我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式：

布局不变，对模块内的内容进行1.挤压－拉伸；2. 换行－平铺；3. 删减－增加；

布局改变，主要有：1.模块位置变换；2.模块展示方式改变：隐藏－展开；3.模块数量改变：删减－增加；

三.媒体查询

（要注意最大宽度时从大到小，最小宽度时从小到大,否则样式优先级问题）

方式一：在样式表中内嵌@media

@media 设备名 only|and|not (media feature){CSS-Code}

字符间以空格相连，选取条件包含在小括号内，多种设备用逗号分隔，这一点继承了css基本语法。

  • only（限定某种设备，可省略），
  • and（逻辑与），
  • not（排除某种设备）为逻辑关键字，
  • srules为兼容设置的样式表，包含在中括号里面。

超小屏幕<768px；小屏幕>=768px；中等屏幕>=992px；大屏幕设备>=1200px

例子

/*屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。*/

@media only screen and (min-device-width:480px) and (max-device-width:1024px) and ( orientation:portrait ){ .box{margin:0 auto;} }

方式二：引用外部样式@import

@import url("css/?.css" )设备名 only|and|not (media feature){CSS-Code}

例子

  1. @import url('style/a.css') screen and (min-width:960px) and (max-width:1199px){   };

注意：（最好在样式表中使用，在style标签中使用IE6.7不兼容）

方式三：在link中使用media

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

例子：

<link rel="stylesheet" href="style/b.css" media=" only screen and (max-device-width:480px) ">

四.媒体查询@media

使用@media 查询，你可以针对不同的媒体类型定义不同的样式。

参考http://www.runoob.com/cssref/css3-pr-mediaquery.html

https://www.w3cplus.com/content/css3-media-queries

主要媒体类型有（可用设备）：

  1. all---用于所有设备
  2. screen---用于电脑屏幕，平板电脑，智能手机等。
  3. print---用于打印机和打印预览
  4. speech---应用于屏幕阅读器等发声设备

媒体特性（功能）@media 可以针对不同的屏幕尺寸设置不同的样式

媒体特性取值min/max描述
width<length>yes定义输出设备中的页面可见区域宽度
height<length>yes定义输出设备中的页面可见区域高度
device-width<length>yes定义输出设备的屏幕可见宽度
device-height<length>yes定义输出设备的屏幕可见高度
orientationportrait 竖屏

 

landscape横屏

no定义'height'是否大于或等于'width'。

 

值portrait代表是---竖屏，landscape代表否---横屏

aspect-ratio<ratio>yes定义'width'与'height'的比率
device-aspect-ratio<ratio>yes定义'device-width'与'device-height'的比率。如常见的显示器比率：4/3, 16/9, 16/10
color<integer>yes定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0
color-index<integer>yes定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
monochrome<integer>yes定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
resolution<resolution>yes定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scanprogressive | interlaceno定义电视类设备的扫描工序

 

progressive：连续扫描；interlace：交织扫描

grid<integer>no用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否

五.常用视口

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

可能的值：

  • width---viewport的宽度 可能的值 像素| device-width
  • height – viewport的高度---可能的值 像素| device-height
  • initial-scale – 初始的缩放比例
  • minimum-scale – 允许用户缩放到的最小比例
  • maximum-scale – 允许用户缩放到的最大比例
  • user-scalable – 用户是否可以手动缩放---可能的值yes||no或者1||0
  • target-densitydpi--- [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
<meta http-equiv="X-UA-Compatible" content="IE=edge">

此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档

X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。

IE=edge 告诉IE,IE8以后的版本使用最新版本的引擎渲染网页;

chrome=1安装了GCF后可以激活Chrome Frame.

emmet快捷键：meta:compat

最后说下IE浏览器，因为他不支持media Queries的，使用时需要引用一个Media Query Javascript解决，如下

  1. <!–[if lt IE 9]>
  3. <script src=”../../css3-mediaqueries.js”></script>
  5. <![endif]–>

更多专业前端知识，请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/361654.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

麦冬

麦冬

麦冬 中文学名&#xff1a;麦冬 拉丁学名&#xff1a;Ophiopogon japonicus (Linn. f.) Ker-Gawl. 别称&#xff1a;麦门冬、沿阶草 植物界百合科 主要价值&#xff1a; 1、有养阴润肺、益胃生津、清心除烦的功效&#xff0c;用于肺燥干咳、阴虚痨嗽、喉痹咽痛、津伤口渴、…
阅读更多...
如何使用Callable和FutureTask

如何使用Callable和FutureTask

介绍 从Java 1.5开始&#xff0c;在java.util.concurrent下有了新的对象集。 该程序包具有许多不同的类&#xff0c;包括线程队列。 当我用Java 1.2编程时&#xff0c;我本可以使用那些&#xff01; 当我开始看这些新玩具时&#xff0c;我变得犹豫不决。 这是什么可调用的东西&…
阅读更多...
NodeJS的安装与使用

NodeJS的安装与使用

Node.js 就是运行在服务端的 JavaScript。越来越多的人在使用它&#xff0c;通过他我们可以用JavaScript来构建后台。对于前端程序员而言&#xff0c;不言而喻这是一条多么令人振奋的消息。对于后台程序员而言&#xff0c;这也是一种很不错的选择。 下面我就来讲解下nodejs的安…
阅读更多...
转载 300年前的黑色“巫女”

转载 300年前的黑色“巫女”

1741年&#xff0c;北极。 白令招呼水手们把船靠上小岛的时候&#xff0c;一排黑色的鸬鹚站在陡峭的悬崖上&#xff0c;像一群黑色的巫女&#xff0c;一动不动朝着他们张望。白令顿时有了一种不祥的预兆。 果然&#xff0c;刚刚上岛&#xff0c;就遭到古怪的兰狐的袭击&#xf…
阅读更多...
华为在爱尔兰增设150个LTE研发职位

华为在爱尔兰增设150个LTE研发职位

据国外媒体报道中国电信和网络跨国公司华为技术预计将在未来两年内在爱尔兰增设150个职位。华为公司目前设在爱尔兰都柏林、阿斯隆和科克的业务处共有50名员工。现在&#xff0c;公司已经投标竞购牌照&#xff0c;目的是为在爱尔兰推出第四代宽带进行基础设施开发。华为公司爱尔…
阅读更多...
Java EE 7 / JAX-RS 2.0 – REST上的CORS

Java EE 7 / JAX-RS 2.0 – REST上的CORS

Java EE REST应用程序通常在开箱即用的开发机器上运行良好&#xff0c;该开发机器上所有服务器端资源和客户端UI均指向“ localhost”或127.0.0.1。 但是&#xff0c;当涉及跨域部署时&#xff08;当REST客户端不再与托管REST API的服务器位于同一域时&#xff09;&#xff0c;…
阅读更多...
jQuery框架-1.jQuery基础知识

jQuery框架-1.jQuery基础知识

jQuery简介 jQuery&#xff0c;顾名思义是JavaScript和查询&#xff08;Query&#xff09;&#xff0c;jQuery是免费、开源的。它可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程且兼容多浏览器的javascript库&#xff0c;核心理念是write less,do more(写得更少,…
阅读更多...
用CornerStone配置SVN，HTTP及svn简单使用说明

用CornerStone配置SVN，HTTP及svn简单使用说明

原文地址&#xff1a;&#xff1a;&#xff1a;http://my.oschina.net/joanfen/blog/194491#OSC_h2_3 一、下载地址二、安装破解方法三、添加repository 1.SVN配置 2.HTTP配置四、使用简介 1.上传项目到repository 2.下载项目 3.版本管理 a)先更新后提交 b)完成独立功…
阅读更多...
联系随笔2---在tomcat服务器上发布servlet应用程序

联系随笔2---在tomcat服务器上发布servlet应用程序

问题二&#xff1a;在tomcat服务器上发布servlet应用程序 1,new->Dynamic Web Project写工程名字->next->next在Generate web.xml文件上打勾勾->finish. 2&#xff0c;在工程名字上&#xff0c;new->servlet。在create Servlet对话框中填写java package包名字和…
阅读更多...
Apache Lucene 5.0.0即将发布！

Apache Lucene 5.0.0即将发布！

终于&#xff0c;在一系列强大的4.x功能&#xff08;最近是4.10.2&#xff09;发布之后&#xff0c;我们终于在努力开发另一个主要的Apache Lucene版本&#xff01; 没有确切时间的承诺&#xff08;完成时就完成了&#xff01;&#xff09;&#xff0c;但是我们已经有一个自愿…
阅读更多...
从零开始学习前端开发 — 15、CSS3过渡、动画

从零开始学习前端开发 — 15、CSS3过渡、动画

一、css3过渡 语法&#xff1a; transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值&#xff1a;all 所有发生变化的css属性都添加过渡 eg: transition: all 1s; ident 指定要过渡的css属性列表 eg: transition:border-radius 1s,back…
阅读更多...
CentOS6.4 Install FTP

CentOS6.4 Install FTP

目录 安装参考传输模式遇到无法显示远程文件夹报错安装参考 https://www.cnblogs.com/walblog/articles/7890226.html 传输模式 主动模式被动模式遇到无法显示远程文件夹报错 点击属性设置&#xff1a; 搞定。 转载于:https://www.cnblogs.com/mysticbinary/articles/11271647.…
阅读更多...
windowsphone7高级编程中提到的地址

windowsphone7高级编程中提到的地址

1、综合性技术论坛&#xff0c;包括windowsphone,.net,iphone,android等&#xff0c;网址&#xff1a;http://p2p.wrox.com 2、windowsphone7高级编程作者Nick Randolph发表博客的网站&#xff0c;网址&#xff1a;http://www.christec.co.nz/&#xff0c; 书中代码下载地址&am…
阅读更多...
用于单元测试的JUnit教程–最终指南（PDF下载）

用于单元测试的JUnit教程–最终指南（PDF下载）

编者注&#xff1a; 我们在Java Code Geeks上提供了许多JUnit教程&#xff0c;例如JUnit入门示例 &#xff0c; 使用断言和注释的 JUnit 示例 &#xff0c; JUnit注释示例等。 但是&#xff0c;为了方便读者&#xff0c;我们希望将所有JUnit功能收集在一份详细的指南中。 我们…
阅读更多...
EF 拉姆达 linq if else （整理）

EF 拉姆达 linq if else （整理）

首先想到&#xff1a;结果不正确&#xff01; var data0 db.T_Plants2; //这里加.AsQueryable()if (locationType 1){.Where(d > d.NaturalEcosystem true);}else{.Where(d > d.BuiltUpArea true);}.Select(d > new{AnimalID d.PlantID,Species d.Species,}).To…
阅读更多...
从零开始学习前端开发 — 7、CSS宽高自适应

从零开始学习前端开发 — 7、CSS宽高自适应

一、宽度自适应 语法&#xff1a;width:100%; 注&#xff1a; a&#xff09;块状元素的默认宽度为100% b) 当给元素设置宽度为100%时&#xff0c;继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二、高度自适应 语法&#xff1a;height:auto;&#xff08;等同于不给元…
阅读更多...
用jOOQ用Java编写SQL

用jOOQ用Java编写SQL

jOOQ是“数据库优先”的类型安全的SQL API&#xff0c;使您可以直观地用Java编写SQL&#xff0c;就像Java编译器本身支持SQL语言一样。 所有数据库模式&#xff0c;表&#xff0c;列&#xff0c;过程和其他对象均作为Java对象提供&#xff0c;可以直接在jOOQ SQL API中使用。 …
阅读更多...
Springboot + Mybatis + Ehcache

Springboot + Mybatis + Ehcache

最近在做一个项目&#xff0c;为处理并发性较差的问题&#xff0c;使用了Mybatis二级缓存 但在多表联合查询的情况下&#xff0c;Mybatis二级缓存是存在着数据脏读的问题的 两天就是在想办法解决这个数据脏读的问题 考虑到简易性、性能、兼容性、可扩展性&#xff0c;我选择了s…
阅读更多...
Autowired注解

Autowired注解

package com.how2java.pojo;import org.springframework.beans.factory.annotation.Autowired;public class Product {private int id;private String name;Autowired// 等价于 Resource(name"c")private Category category;public int getId() {return id;}public …
阅读更多...
UVa 100

UVa 100

今天也算是练习了一下记忆化搜索&#xff0c;这道题也包含很多值得注意的地方 1、 输入的两个数不一定前者比后者大 2、 变换的过程中可能会超出int范围 3、 为了不超时可以作下预处理 #include<iostream>#include<cstring>#include<cstdio>using namesp…
阅读更多...
最新文章

Copyright @ 2022~2023