CSS5:移动端页面(响应式)
CSS5:移动端页面(响应式)
如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你还是PC端,就交给后端来做
只有一些新闻站点和博客站点用响应式,因为布局简单,响应式足够
1.媒体查询 media query
媒体:电脑,纸张,都是媒体
含义:如果媒体满足0到800 之间,那么会应用这里面的样式
<style>
@media (max-width: 800px){/*如果媒体满足0到800 之间,那么会应用这里面的样式*/
body{
background-color: red;
}
}
</style>注意:
<style>
@media (max-width: 800px){/*如果媒体满足0-800 之间,那么会应用这里面的样式*/
body{
background-color: red;
}
}
@media (max-width: 900px){/*如果媒体满足0-900 之间,那么会应用这里面的样式*/
body{/*这段媒体查询比上面优先级高,会将上面的覆盖,如果低于800了,会变成蓝色*/
background-color: blue;
}
}
</style>所以要倒过来写,先写大范围
<style>
@media (max-width: 768px){/*0-768*/
body{
background-color: blue;
}
}
@media (max-width: 425px){/*0-425*/
body{
background-color: red;
}
}
@media (max-width: 375px){/*0-375*/
body{
background-color: orange;
}
}
@media (max-width: 320px){/*0-320*/
body{
background-color: black;
}
}@media (min-width: 769px){/*769~+++*/
/*超过769的*/
body{
background-color: green;
}
}
</style>也可以规定详细范围:
1.1引用方法
也可以使用CSS文件的方法引用
https://segmentfault.com/ (这个网站就用了响应式)
还有https://www.smashingmagazine....
能随着你屏幕宽度动的页面就是响应式页面
1.2 要向设计师要网页设计图
1.3 隐藏菜单响应式
1.3.1先做手机还是先做PC
Mobile first 先做手机
desktop first 先做PC
推荐Mobile first,因为现在大部分都是手机看网页
1.3.2CSS优先级问题解决方法
- 用谷歌开发者工具查看CSS优先级,然后调整
- 如果style内嵌在html里,比如jquery的toggle,那么直接使用display: none !important;
1.3.3flex布局的一些用法
header{
display: flex;
/*里面的垂直居中*/
align-items: center;
}
header .mobilMenu {
display: flex;
justify-content: space-around;
/*flex布局display: flex;这个容器使用flex布局
justify-content属性定义了项目在主轴上的对齐方式。
justify-content: space-around;每个容器里面的项目两侧的间隔相等。*/
background-color: #ccc;
}代码
预览
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>响应式页面</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
ul, ol {
list-style: none;
}
.logo {
width: 60px;
height: 60px;
background: #000;
border-radius: 50%;
}
header {
position: relative;
}
header > button {
position: absolute;
right: 0;
top: 26px;
}
header .mobilMenu {
display: flex;
justify-content: space-around;
/*flex布局display: flex;这个容器使用flex布局
justify-content属性定义了项目在主轴上的对齐方式。
justify-content: space-around;每个容器里面的项目两侧的间隔相等。*/
background-color: #ccc;
}
header .pcMenu{
display: none;
}
/*接下来做pc端*/
@media (min-width: 451px) {
/*一般都写 451,手机最大也就450px*/
/*先隐藏手机菜单和按钮*/
header .mobilMenu{
display: none !important;
/**CSS优先级问题解决方法:
1.直接使用display: none !important;
2.用谷歌开发者工具查看CSS优先级
*/
}
header > button {
display: none;
}
header{
display: flex;
/*里面的垂直居中*/
align-items: center;
}
/*再把pcMenu写成flex布局*/
header .pcMenu{
display: flex;/*只要改成flex 里面的子项目就变成一行了*/
margin-left: 20px;
background: red;
}
header .pcMenu>li{
margin-left: 20px ;
}
}
</style>
</head>
<body>
<header>
<div class="logo"></div>
<button id="menu">菜单</button>
<ul class="mobilMenu">
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
<ul class="pcMenu">
<li><a href="#">pc到航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
</header>
</body>
<script>
$('#menu').on('click', function () {
$('.mobilMenu').toggle();//toggle() 方法切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
//缺点:如果使用toggle(),他会把display这个style的属性内嵌到放在html里.
})
</script>
</html>手机端要加一个meta viewport
历史原因:最开始手机浏览器(苹果三)会在自己的三四百像素的手机上模拟980像素的显示效果,然后让用户自己去缩放,查看网页.
那么就告诉浏览器不要缩放我的网页,手机屏幕是多少像素,就显示多少像素的网页.使用下面的代码
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
name="viewport" :视口
content="width=device-width,宽度等于设备宽度,意思就是不要变成980,用设备宽度.
user-scalable=no, 用户是否可以缩放:不许缩放,因为我在代码里已经给用户适配好了
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
初始缩放倍数,最大缩放倍数,最小缩放倍数,都是1.0,即使不能缩放这句话缩写语法:mate:vp
总结这个meta作用:
- 防止手机页面模拟 980 像素宽度
- 防止页面在用户双击的时候放大
- 防止用户两指缩放页面
3.移动端的特点
3.1flex布局是专门给手机定制的
只要学会flex布局,手机端布局基本OK手机端的交互方式不一样
3.2手机端的交互方式不一样
- 没有 hover
- 有 touch 事件
如何监听滑动事件?记录两次滑动时候的坐标,相减,就可以了.
有封装的库,例如jquery swipe, vue里的插件 - 没有 resize
手机端的宽度永远跟设备宽度一样 - 没有滚动条
滚动条会隐藏,会变成一个指示器,跟PC端不一样 - 没有ie,意思就是什么CSS属性都可以用,不用考虑兼容的问题
4.CSS3的calc()使用
链接:https://www.w3cplus.com/css3/...
平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异模式）。虽然前面介绍的CSS3属性中的box-sizing在一定程度上解决这样的问题，其实的calc()函数功能实现上面的效果来得更简单。
移动端页面布局常用哪些属性？
display: flex
width: calc(50% - 10px);本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hc1hh22k0jb
CSS5:移动端页面(响应式)的更多相关文章
- Web移动端页面 --响应式和动态REM
响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变. 如何着手响应式有以下几个思考的方向 找一份设计图 使用Media Query 隐 ...
- 超棒的HTML5/CSS3单页面响应式模板（支持Bootstrap）
在线演示 使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)
- 浅谈pc和移动端的响应式
身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应是最早 ...
- 移动端和pc端，响应式设计布局
1.什么是响应式 Web 设计? 响应式 Web 设计让你的网页能在所有设备上有好显示. 响应式 Web 设计只使用 HTML 和 CSS. 响应式 Web 设计不是一个程序或Javascript脚本 ...
- 如何做好移动端的响应式设计：Viewport控制
新人翻译,欢迎转载~ 英文原文地址:http://bitsofco.de/2015/respove-design-viewport/ 原文例程地址:https://github.com/ireade/ ...
- Bootstrap页面响应式设计
关键词:viewport.栅格布局.媒体查询(Media Queries) 一.关于栅格布局的说明: 1.基本图解 extra small devices phones 超小型设备手机small d ...
- HTML多端适应 响应式布局案例
HTML布局: <div id="one"> <div class="aa"></div> <div class=&q ...
- javascript适合移动端的响应式瀑布流插件实例演示
在线预览 jQuery插件大全 实例代码 <div class="sucaihuo-container"> <div class="demo" ...
- [移动端WEB] 移动端网站响应式布局之"rem"，CSS3 rem使用方式
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ' ...
随机推荐
- 正则表达式（三）——Java中的相关函数
1.前言 之前在学习Python时,我已经说过正则表达式的相关语法,这里不再赘述了,有需要可以参考: 2020.10.7 正则表达式(一) - ShineLe - 博客园 现在开始学习Java中的正则 ...
- strtok:This function or variable may be unsafe.
https://jingyan.baidu.com/article/49711c616b8a1ffa441b7cdc.html
- LeetCode-092-反转链表 II
反转链表 II 题目描述:给你单链表的头指针 head 和两个整数 left 和 right ,其中 left <= right .请你反转从位置 left 到位置 right 的链表节点,返回 ...
- 简单认识java enum枚举
什么是枚举 枚举是java5中新增的特性,他是一个特殊的数据类型,他的特殊性在于他既是一种类类型,又比类类型多了安全性,简洁性,便捷性.java枚举类型是功能十分强大齐全的类,功能比其他语言中的对等物 ...
- DBScan聚类，打破形状的限制，使用密度聚类
如何用花盆摆放成国庆字,并且包围这两个字. 在DBSCAN中衡量密度主要使用的指标:半径.最少样本量 算法原理 *直接密度可达 如果一个点在核心对象的半径区域内,那么这个点和核心对象称为直接密度可达, ...
- [翻译] TensorFlow 分布式之论文篇 "Implementation of Control Flow in TensorFlow"
[翻译] TensorFlow 分布式之论文篇 "Implementation of Control Flow in TensorFlow" 目录 [翻译] TensorFlow ...
- tensorflow源码解析之framework-allocator
目录 什么是allocator 内存分配器的管理 内存分配追踪 其它结构 关系图 涉及的文件 迭代记录 1. 什么是allocator Allocator是所有内存分配器的基类,它定义了内存分配器需要 ...
- 数据备份RAID1 和RAID5详解和对比
数据备份RAID1 和RAID5详解和对比 RAID 全称 Redundant Array of Independent Disks,中文意思"独立的冗余磁盘列队". RAID 一 ...
- Linux性能优化实战内存篇（五）
一.Linux内存工作原理 1,内存映射 Linux内核给每个进程都提供了一个独立的虚拟空间,并且这个地址空间是连续的.这样,进程就可以很方便地访问内存,更确切地说是访问虚拟内存. 虚拟地址空间的内部 ...
- vue项目部署到阿里云服务器(windows)，Nginx代理！
项目构成: 前端:vue+vant-ui, 数据库:mysql, 后端:node.js 部署方式:nginx代理: 一,首先要拥有自己的服务器,阿里,腾讯都可以,我用的是阿里的: 如果只是做个人项目的 ...