css教程

全套@media响应式布局代码方案分享

我的站长站 2023-09-24 人阅读
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 15px;
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size:15px;
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: 15px;
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: 15px;;
    }
}

// 400
@media screen and (min-width: 400px) {
    html {
        font-size: 15px;
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: 15px;;
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: 15px;
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: 15px;
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: 15px;
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: 15px;
    }
}

// 750
@media screen and (min-width: 750px) {
    html {
        font-size: 15px;
    }
}

// 768-1024
@media only screen and (min-width: 767px) and (max-width: 1000px){
    html {
        font-size: 15px;
    }
}


相关推荐
  • @media
  • 响应式教程
  • 全套@media响应式布局代码方案分享

    // 320@media screen and (min-width: 320px) { html { font-size: 15px; }}// 360@media screen and (min-width: 360px) { html { font-size:15px; }}// 375 iphone 678@media screen and (min-width: 375px) { html...

    css教程 24 1年前
  • @keyframes实现CSS动画帧效果

    本教程教大家如何使用@keyframes,制作一个类似幻灯片的CSS动画效果。首先我们准备一张连贯的动作图片,这里以这张熊跑路为例。新建一个DIV容器,放这里一帧图片<div></div>DIV的盒子属性div { position: absolute; width: 200px; ...

    css教程 79 2年前
  • 分享自用的CSS自适应写法

    在写CSS前,需要在页面上<head>内加上如下代码,<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />禁止页面缩放,如果自动缩放了就不能触发CSS自适应代码了。然后是自用的CSS自适应代码,大...

    css教程 83 3年前
  • 利用JavaScript判断页面宽度的响应式布局方法

    分享一个我的站长站自用的响应式网站布局方法,非常简单好用。利用JavaScript判断页面宽度,结合rem单位, 实时修改网站尺寸,达到响应式布局方法。首先前端开发中,样式尺寸单位全部用rem,比如:.content{width: 8rem;border-radius: 0.15rem;font-size: 0.95re...

    js教程 13 1年前
  • 中小企业制作响应式网站有何有优点?

    随着互联网时代不断的发展,网站是各大企业发展的必须品。但是随着近年来移动手机流行,移动端用户流量也是逐渐上涨,为了更好推广企业产品等,移动网站的制作也开始的大规模发展,由于网站不仅面向pc端,同时也是面向移动端,所以响应式网站成为众多企业的选择对...

    经验分享 225 5年前
  • 自适应与响应式网站建设的区别

    网站建设是对于一个新手来讲是一件繁琐累人的事情,首先你要考虑自己的网站用途是什么?如果自己做建设,你需要的知识是很多的,如C++、java、php、dreamweaver、photoshop、firework等等,一个网站不单单做出来,还是需要后期维护的。网站建设初期,对于无网页设...

    经验分享 255 4年前
最新更新