CSS响应式：根据分辨率加载不同CSS的几个方法

一般情况下，根据分辨率加载pc端 wap端 pad端三个css文件，示例：

<link rel="stylesheet" type="text/css" href="./css/style.css" media="all">
<link rel="stylesheet" href="./css/phone.css" media="(max-width:620px)">
<link rel="stylesheet" href="./css/pad.css" media="screen and (max-width:1024px) and (min-width:621px)">

//其中 media 是媒体查询的范围，当最大宽度是1200，这里就是手机平板一下的尺寸 加载手机css ，反之电脑css<link rel="stylesheet" type="text/css" href="../css/m_wuqinglan.css" media="screen and (max-width:1200px)"/>
<link rel="stylesheet" type="text/css" href="../css/pc_wuqinglan.css" media="screen and (min-width:1201px)"/>

只有一个css文件情况下，根据分辨率调整css样式，示例：

@media screen and  (max-width:620px){.logo{width: 300px;margin-left: -140px;}
}@media screen and  (max-width:1024px) and (min-width:621px) {.logo{width: 220px;margin-left: -99px;}.nav li:nth-of-type(2),.nav li:nth-of-type(3){width: 8%;}.nav li:nth-of-type(5),.nav li:nth-of-type(6){width: 12%;}
}

转载于:https://www.cnblogs.com/yuan9580/p/11513013.html

CSS响应式：根据分辨率加载不同CSS的几个方法相关推荐

响应式瀑布流加载更多
演示https://infinite-scroll.com/demo/masonry/ <!doctype html> <html lang="en" class ...
ios html加载css样式,iOS加载HTML, CSS代码
NSString *strHTML = @" // NSString *strHTML = model.goods_datails; NSMutableString *targerStr = ...
css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度文章目录 html响应式网页设计:自动适应屏幕宽度背景一."自适应网页设计"的概念二.允许网页宽度自动调整-使用meta标签:vie ...
CSS响应式布局（自适应布局）
CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本.这个 ...
社会化图标html,[CSS]响应式社会化分享按钮
[CSS]响应式社会化分享按钮 6月 18, 2014 评论 (2) Sponsor 目前很多网站都使用了社会化分享按钮,即使是一个简单的专题页都会使用上,所以这里分享大家一个响应式社会化分享按钮(R ...
css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)
最近在项目中使用了一下webpack,所以这里打算对目前了解的使用方法做一个小小的总结为什么是webpack webpack一下自己就?了,这绝对是一个重要的原因. 然后我之前项目中都是通过requ ...
CSS - 响应式布局（二）响应式栅格系统
目录响应式栅格系统栅格栅格系统响应式栅格系统 BootStrap响应式栅格系统简单说明利用SCSS实现BootStrap的响应式栅格系统响应式栅格系统栅格在弄清楚响应式栅格系统前,我 ...
java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...

CSS响应式：根据分辨率加载不同CSS的几个方法

CSS响应式：根据分辨率加载不同CSS的几个方法相关推荐

最新文章

热门文章