HTML多端适应 响应式布局案例
HTML布局:
<div id="one">
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
</div>
CSS代码:
设置视口:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
PC端:
/* pc */
@media only screen and (min-width: 600px) {
.aa{
width: calc(94%/4);
margin-left: 2%;
height: 200px;
margin-top: 10px;
}
.aa:nth-child(4n+1){
margin-left: 0;
}
}
iPad端:
/*ipad*/
@media only screen and (min-width: 300px) and (max-width: 600px) {
.aa{
width: calc(98%/2);
margin-left: 2%;
height: 200px;
margin-top: 10px;
}
.aa:nth-child(2n+1){
margin-left: 0;
}
}
手机端:
/*phone*/
@media only screen and (min-width: 0px) and (max-width: 300px) {
.aa{
width: 100%;
margin-left: 0;
height: 200px;
margin-top: 10px;
}
}
PC端效果(呈4排显示):
iPad端效果(双排显示):
Android端效果(单排显示):
HTML多端适应 响应式布局案例的更多相关文章
- [移动端WEB] 移动端网站响应式布局之"rem",CSS3 rem使用方式
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ' ...
- CSS3移动端vw+rem不依赖JS实现响应式布局
1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...
- 探讨兼容IE低版本的PC端响应式布局
http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了, ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- 【CSS-移动端响应式布局详解】
背景 移动端响应式布局开发主要方案有: 基于rem开发 基于媒体查询 基于弹性盒 基础概念 在讨论响应式布局知识前,先了解下移动端常用基础概念. 逻辑像素(CSS pixels) 浏览器使用的抽象单位 ...
- PC 端响应式布局
前言:PC端 电脑显示器的尺寸种类还是很多的,台式电脑和笔记本电脑尺寸相差就更明显,所以响应式布局还是很重要的,甚至是必须要考虑的. 响应式的页面好不好,在后管平台上很明显.因为后管平台,一般是全屏显 ...
- 响应式布局rem、rem方法封装、移动端响应式布局
相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...
- NopCommerce 3.4中移动端访问抛弃响应式布局
在Nop3.4中,他抛弃了原来的xxx.Mobile.cshtml的这种写法,而是采用了响应式布局,并且把规则也给改了,你在后台配置不启用响应式布局,在前台你仍然不能写xxx.Mobile.cshtm ...
- 从零开始学 Web 之 移动Web(六)响应式布局
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- MediaPlayer详解
[1]MediaPlayer 详细使用细则 [2]MediaPlayer使用详解_为新手准备 [3]MediaPlayer 概览
- OS开发之Objective-C与JavaScript的交互
UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS ...
- 【Java 设计】如何优雅避免空指针调用
空指针引入 为了避免空指针调用,我们经常会看到这样的语句 if (someobject != null) { someobject.doCalc();} 最终,项目中会存在大量判空代码,多么丑陋繁冗! ...
- Nginx日志分析脚本
目录 一.简介 二.脚本 一.简介 运维工作是一个比较复杂的工作,有时候面对上万条的日志,如何作分析?难道一条条的分析? 这估计看两眼就要打哈欠了吧?聪明的人会选择脚本,这就是为什么现在提倡自动化运维 ...
- Linux中的正则
目录 一.匹配规则 二.举例 一.匹配规则 * 匹配 0 或多个字符 ? 匹配任意一个字符 [list] 匹配 list 中的任意单一字符 [^list] 匹配 除list 中的任意单一字符以外的字符 ...
- react-hook简单使用
一.函数式组件创建 function HelloComponent(props, /* context */) { return <div>Hello {props.name}</d ...
- Flutter 2.8 更新详解
北半球的冬意已至,黄叶与气温均随风而落.年终的最后一个 Flutter 稳定版本 已悄然来到你的面前.让我们向 Flutter 2.8 打声招呼- 本次更新包含了 207 位贡献者和 178 位审核者 ...
- 搭建直接通过CPU执行汇编语言的环境
搭建直接通过CPU执行汇编语言环境 我们通过编译写好的汇编语言代码可以生成.bin的机器语言二进制代码.但是这个.bin程序我们该如何运行呢? 这里其实有两个办法: 1: 将其作为一个Windows/ ...
- [BUUCTF]PWN8——jarvisoj_level0
[BUUCTF]PWN8--jarvisoj_level0 题目网址:https://buuoj.cn/challenges#jarvisoj_level0 步骤: 例行检查,64位,开启了NX保护 ...
- 日历的种类(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 日历有三种:标准日历.24小时日历和夜班日历. 设置的位置在[项目]>[属性]>[更改工作时间]>[ ...