响应式布局 max-device-width 与 max-width 的区别

闲来没事，研究了一下多屏适配和响应式布局的 CSS。

第一种写法

 1 @media screen and (max-device-width: 320px) {
 2
 3 }
 4
 5 @media screen and (min-device-width: 321px) and (max-device-width: 640px)  {
 6
 7 }
 8
 9 @media screen and (min-device-width: 641px) and (max-device-width: 1000px)  {
10
11 }

第二种写法

 1 @media screen and (max-device-width: 640px)  {
 2
 3     @media screen and (max-device-width: 320px) {
 4
 5     }
 6
 7     @media screen and (max-device-width: 360px)  {
 8
 9     }
10 }
11
12 @media screen and (min-device-width: 641px) and (max-device-width: 1000px)  {
13
14 }

max-device-width 与 max-width 的区别

max-device-width	max-width
根据设备屏幕的宽度进行适配	根据显示区域的宽度进行适配
PC浏览器随意缩放时不会响应	PC浏览器随意缩放时会响应
-	同时兼容max-device-width

页面示例

响应式布局 max-device-width 与 max-width 的区别相关推荐

CSS响应式布局（自适应布局）
CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本.这个 ...
CSS3 @media媒体查询适配不同尺寸设备的响应式布局（清晰详解）
随着宽屏的不断普及,CSS3出现了@media媒体查询技术一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...
HTML CSS笔记(没有基础内容，比如br标签是换行什么的)，CSS2.1，CSS3，响应式布局
每一个知识点都有相应的测试代码,你可以将代码复制到文件中,然后在浏览器中打开测试即可推荐使用谷歌浏览器Chrome,因为都没有做hack浏览器兼容文章目录一.基础(HTML和CSS中较复杂内容) ...
Responsive响应式布局设计
响应式布局介绍: 什么是响应式布局 1.服务器根据不同的浏览器用户端,为用户呈现不同的页面效果. 2.可以让一个网站兼容不同分辨率的设备,给用户更好的视觉使用体验. 3.移动互联网催生了响应式布局的诞 ...
BootStrap之前奏响应式布局
BootStrap 简介概念: 课程目标: 响应式布局技术了解BootStrap前端框架一.响应式布局 1.1 历史问题回顾之前HTML+CSS的布局方式,都是使用像素(px)来布局网页的,可 ...
如何实现响应式布局？
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布 ...
响应式布局这件小事有哪些优点和缺点该怎么设计
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布 ...
html怎么做成响应式的,怎么用html5完成响应式布局？
怎么用html5完成响应式布局?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么用5完成响应式布局? 步骤1 建立空 ...
Css3中的响应式布局的应用
Media Queries直译过来就是"媒体查询",在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css& ...
web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

响应式布局 max-device-width 与 max-width 的区别

第一种写法

第二种写法

max-device-width 与 max-width 的区别

响应式布局 max-device-width 与 max-width 的区别相关推荐

最新文章

热门文章