css响应式页面

dcr309duan 发布于2019-08-29 15:19 / 1197人阅读

摘要：视口宽度为设备宽度不要让用户缩放初始缩放倍数为最大缩放倍数为最小缩放倍数为响应式页面单位用或者，在确定屏幕高度的情况下可以用，在确定屏幕宽度的的情况下用。

媒体查询后来者居上，blue会覆盖red。

@media(max-width: 320px){
    body{
        background: red;
    }
}
@media(max-width: 425px){
    body{
        background: blue;
    }
}

解决：
1.用倒序的方法写，满足条件的在下面，就不会被覆盖了。

@media(max-width: 425px){
    body{
        background: blue;
    }
}
@media(max-width: 320px){
    body{
        background: red;
    }
}

2.让前后条件之间不要与交集，可用and连接，前后条件都要加括号。

@media(max-width: 320px){
    body{
        background: red;
    }
}
@media(min-width: 321px) and (max-width: 425px){
    body{
        background: blue;
    }
}

媒体查询结果可用CSS文件代替里面的内容，不满足条件link不会生效，但是文件都会下载，如果等变了在下载，就来不及了。

在学习响应式的过程中，写了一个粗糙的响应式页面，通过改变浏览器窗口的大小可以渲染不同CSS样式


    


    
        
        
              //ul快捷创建方法：ul>li*5>a[href=#]{导航$}
            导航1
            导航2
            导航3
            导航4
            导航5
        

        
            导航1
            导航2
            导航3
            导航4
            导航5

Web页面做移动端适配，加上这句话就可以了。

name="viewport"：视口
width=device-width：宽度为设备宽度
user-scalable=no：不要让用户缩放
initial-scale=1.0：初始缩放倍数为1.0
maximum-scale=1.0：最大缩放倍数为1.0
minimum-scale=1.0：最小缩放倍数为1.0

响应式页面CSS

CSS 单位用vh或者vw，在确定屏幕高度的情况下可以用vh，在确定屏幕宽度的的情况下用vw。
100vh是视口高度，页面中元素的宽高的单位通过换算后，用vh，1vh是屏幕高度(px)除以100vh。
@media用max-width要用倒序，因为后来者居上，而用min-width用正序就可以了。
水平布局父元素用：display:flex;，子元素用：flex:1;

GPU云服务器云服务器响应式响应式布局响应式网站响应式设计

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

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

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

摘要：接下来做端一般都写手机最大也就先隐藏手机菜单和按钮优先级问题解决方法直接使用用谷歌开发者工具查看优先级里面的垂直居中再把写成布局只要改成里面的子项目就变成一行了菜单导航导航导航导航导航到航导航导航导航导航方法切换元素的可见状态。 CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你...

superPershing 2019-08-30 15:53 评论0 收藏0
响应式布局的实现

摘要：响应式布局的概念响应式布局，即，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。框架实现响应式布局利用中栅格系统可以简单实现响应式布局，这里就需要去理解一下啥是栅格系统代表在端上显示在一行的个栅栏，也就是一半。响应式布局的概念响应式布局，即 Responsive design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏...

syoya 2019-08-30 10:55 评论0 收藏0
css响应式页面

摘要：视口宽度为设备宽度不要让用户缩放初始缩放倍数为最大缩放倍数为最小缩放倍数为响应式页面单位用或者，在确定屏幕高度的情况下可以用，在确定屏幕宽度的的情况下用。媒体查询后来者居上，blue会覆盖red。 @media(max-width: 320px){ body{ background: red; } } @media(max-width: 425px){...

OBKoro1 2019-08-22 17:02 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0