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 ...
随机推荐
- stlink 无法再keil中识别 按下复位键可以识别
最近遇到一个很是头痛的问题 本来板子是好好的,就是从公司带回的家里 然后再次用stlink烧写程序的时候就出现了问题: 但是查看电脑端,上面是有stlink的 也就是电脑是好的, 我立刻又试了一下家中 ...
- Linux定时任务crontable简介
Linux下定时执行任务的方法:Linux之crond 服务介绍:https://www.cnblogs.com/liang-io/p/9596294.html http://www.mamicode ...
- Android中的性能优化
由于手机硬件的限制,内存和CPU都无法像pc一样具有超大的内存,Android手机上,过多的使用内存,会容易导致oom,过多的使用CPU资源,会导致手机卡顿,甚至导致anr.我主要是从一下几部分进行优 ...
- linux安装redis报错
问题:You need tcl 8.5 or newer in order to run the Redis test 解决办法: wget http://downloads.sourceforge. ...
- Mac iOS区别
iOS是从MacOS衍生出来的专门未为移动设备(iphone)推出的操作系统.iOS和Mac OS的UI观念有很大差别,iOS主要支持手势操作,包括多触点技术等等.从开发人员观点看,iOS和macos ...
- struct vs class in C++
在C++中,除了以下几点外,struct和class是相同的. (1)class的成员的默认访问控制是private,而struct的成员的默认访问权限是public. 例如,program 1会编译 ...
- 机器学习——可视化绘图matplotlib和seaborn
安装matplotlib和seaborn https://blog.csdn.net/Jia_jinjin/article/details/80428598 seaborn pairplot:特征两两 ...
- SQL Server 2014如何DATEDIFF()函数截取对应时间年月日
4.1 定义和用法: DATEDIFF()函数返回两个日期之间的时间 4.2 语法 DATEDIFF(datepart,startdate,enddate) datepart值: year | qua ...
- 转: 再谈select, iocp, epoll,kqueue及各种I/O复用机制
首先,介绍几种常见的I/O模型及其区别,如下: blocking I/O nonblocking I/O I/O multiplexing (select and poll) signal drive ...
- 简单的理解 Object.defineProperty()
Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性. Object.defineProperty(obj,prop,descriptor ...