shaosiming

css中怎么写自适应,跟随分辨率改变宽度

如今随着移动端的崛起,越来越多的网站开发了手机APP客户端,但是作为个人站长,开发APP着实有点难弄~ 所以,自适应就解决了手机端访问的问题。...

关键词: CSS 自适应 CSS3
时间:2019-09-16
查看:
评论:0 条 / 我也去评论
如今随着移动端的崛起,越来越多的网站开发了手机APP客户端,但是作为个人站长,开发APP着实有点难弄~ 所以,自适应就解决了手机端访问的问题。

可是,很多人还是不了解自适应的原理到底是怎么回事,今天就简单直接的方式来说明一下自适应到底是如何制作的,看完以后你会发现,卧槽~真TM简单啊!

简单除暴的demo:点击进入

是不是很简单粗暴?随着不同的分辨率,ssm03元素会自动改变宽度和背景颜色,简单明了。可是到底是怎么制作呢?

制作方法:

首先需要加入 @media 属性,意识就是可以可以根据不同的分辨率设置不同的属性样式,就比如演示中绿色是大于等于1200分辨率。

而小于1200却大于680会采用红色背景,而大于0小于680会采用深蓝色作为背景。我们可以设置固定的背景,也可以全部采用100%的宽度。

而电脑屏幕过大,而且尺寸过多,所以我们规定到1200px的分辨率,而平板或者手机都较小,所以我们就全部采用100%的宽度就可以了。

代码展示:

    .ssm01 {width:100%}
    .ssm02{width: 1200px;margin: auto;text-align: center;margin-top: 200px}
    .ssm03{background: #3b7007;color: #FFF;padding: 50px;}
    @media screen and (max-width: 1200px){
        .ssm02{
            width: 100%;
        }
    }
    @media screen and (max-width: 1200px){
        .ssm03{
            background: #640401;
        }
    }
    @media screen and (max-width: 680px){
        .ssm03{
            background: #1e0044;
        }
    }

代码说明:

我们设置pc端(ssm02)分辨率为1200px,然后在下面加入 @media screen and (max-width: 1200px){ 属性 } 即可,意识就是说最大分辨率1200,如果低于1200会使用新的属性,如果大于1200则保持不变。

下面的ssm03设置了两个 一个是680 一个1200 ,也就是最大分辨率低于680会使用一个颜色,高于680小于1200会使用一个颜色。其实max-width 和 mix-width使用都是一样的,只是一个最大一个最小而已。

怎么样,大家学会了吗?是不是感觉卧槽,真TM简单啊~~ 没错简单是简单,就是要写自适应,等于把大部分CSS重新写了一遍,因为要重新规定2个或者更多的属性,所以我一直懒得做适应,没错,就是懒!
顶一下  
(3)
  100%
踩一下  
(0)
  0%
  • 本文标题:css中怎么写自适应,跟随分辨率改变宽度
  • 本文链接:https://www.shaosiming.net/html/news/42.html
  • 转载说明:如果没有标明转载均为少司命个人博客原创!转载需要注明出处~
  • 既然都来了,就说点什么吧……
    • 全部评论(0
      还没有评论,快来抢沙发吧!

    CSS初始公共样式和清除默认样式的写法

    大家都知道,在浏览器中通常都会含有默认的样式,User Agent Stylesheet。意识就是说当某个class元素我们没有写入css样式的时候...

    css   样式   默认   
    2019-09-20
    56
    0

    CSS3鼠标焦点滑过过渡延迟展示效果的代码

    在鼠标经过或者停留的时候,由一种状态展示位另一种状态。在css3之前,hover属性是没有任何过渡或者特效动画的。...

    CSS   CSS3   焦点   hover   
    2019-09-12
    111
    0

    通过CSS3控制鼠标滑过图片缩放效果

    大家都知道,一般需要用到特效的时候,大部分都是用JS来操作,可是从CSS3流行以后,有了很多特效可以通过CSS来实现。相对...

    CSS3   CSS   图片缩放   
    2019-09-03
    162
    0

    关于CSS横着写还是竖着写?区别是什么?

    今天突发奇想,想到一个问题,就是关于CSS的写法,有人喜欢横着写,有人喜欢换行竖着写,到底有什么区别呢? 于是乎,...

    CSS   CSS3   CSS写法   
    2019-09-02
    78
    1