CSS5:移动端页面(响应式)

superPershing 发布于2019-08-30 15:53 / 2171人阅读

摘要：接下来做端一般都写手机最大也就先隐藏手机菜单和按钮优先级问题解决方法直接使用用谷歌开发者工具查看优先级里面的垂直居中再把写成布局只要改成里面的子项目就变成一行了菜单导航导航导航导航导航到航导航导航导航导航方法切换元素的可见状态。

CSS5:移动端页面(响应式)

如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你还是PC端,就交给后端来做
只有一些新闻站点和博客站点用响应式,因为布局简单,响应式足够

1.媒体查询 media query

媒体:电脑,纸张,都是媒体
含义:如果媒体满足0到800 之间,那么会应用这里面的样式

注意:

所以要倒过来写,先写大范围

也可以规定详细范围:

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;
        }

代码

预览

手机端要加一个meta viewport

历史原因:最开始手机浏览器(苹果三)会在自己的三四百像素的手机上模拟980像素的显示效果,然后让用户自己去缩放,查看网页.

那么就告诉浏览器不要缩放我的网页,手机屏幕是多少像素,就显示多少像素的网页.使用下面的代码

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);

云服务器 GPU云服务器移动端页面移动端页面显示移动端html页面响应式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116729.html

前端面试题（移动适配，闭包，this，HTTP状态码，排序思路，页面加载，数组去重）

摘要：例如状态码表示响应成功。答状态码表示服务器已接受请求，但尚未处理。状态码表示发送的请求需要有通过认证的认证信息。状态码表示服务器端在执行请求时发生了错误。响应报文也是由三部分组成状态码响应报头和响应报文。前端面试题（移动适配，闭包，this，HTTP状态吗，排序思路，页面加载，数组去重） 1 请写出一个符合 W3C 规范的 HTML 文件请写出一个符合 W3C 规范的 HTML 文...

chaos_G 2019-08-22 18:40 评论0 收藏0
CSS中的class与id区别及用法

摘要：与基本属性及用法在程序中称类，同时在中也书面语也叫类。在样式中以小写的点及来命名如属性属性值而在页面里则以来选择调用命名好的又叫选择器。也就是说只是页面元素的标识，供其他元素脚本等引用。我们平常在用DIV CSS制作Xhtml网页页面时，常会用到class 和id来选择调用CSS样式属性。 CLASS与ID基本属性及用法： Class 在程序中称类，同时在CSS中也书面语也叫类。 ...

Carl 2019-04-23 11:57 评论0 收藏0
Web移动端页面 --响应式和动态REM

摘要：当媒介最大宽度为且是横屏时里面的样式生效目前前端开发项目类型可以分为两种方式，和。这样我们的响应式网页才完全生效了。移动端特点移动端特点没有有没有滚动条没有没有因为移动端是没有事件的所以当我们在需要兼容移动端的页面中应该尽量少用事件。鄙人最近才刚刚开始学习一些关于移动端的知识，还只是个小白，文中可能有许多理解错误，望指出，请多多见谅。响应式什么是响应式页面呢？顾名思义响应式页面就是能做...

BLUE 2019-04-23 13:44 评论0 收藏0
响应式设计个人的一些总结

摘要：所以一个网，甚至是响应式设计，在两个平台上都会损害您整体的。三响应式与如果把网站作为一个单独的网站，如果网站的内容与桌面版的内容相对缺少，导致用户回到桌面端的网站，会记录这种选择，使搜索排名降低，国内百度就不知道会怎样。一、为什么需要响应式设计（responsible web design） 1. 响应式发展背景 1、屏幕尺寸的快速变化，iphone为320x480，分辨率在未来可以...

LeoHsiun 2019-08-01 15:32 评论0 收藏0
谈谈响应式布局

摘要：今天在这里就略微谈一下响应式布局吧想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一接下来我们从小到大来谈谈响应式网页设计的基本原则为什么为什么需要响应式设计想必这点不说大家都能想到答案现在是一个移动为先的时代我们要今天在这里就略微谈一下响应式布局吧,想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一,接下来我们从小到大来谈谈响应式网页...

smallStone 2019-08-29 11:30 评论0 收藏0