css 适配

冷不防 2022-09-10 08:11 207阅读 0赞

### 文章目录 ###

*  1.自己已经实践的部分
 *  2.参考博客

# 1.自己已经实践的部分 #

*  当浏览器可视部分宽度小于480px时

@media screen and (max-width: 480px) {
        
     
        html {
        
            -webkit-text-size-adjust: none;
        }
     
        #main-nav a {
        
            font-size: 90%;
            padding: 10px 8px;
        }
     
    }

*  当浏览器可视部分宽度小于650px时（单栏布局）

@media screen and (max-width: 650px) {
        
     
        #header {
        
            height: auto;
        }
     
        #content {
        
            width: auto;
            float: none;
            margin: 20px 0;
        }
    
     
    }

*  当浏览器可视部分宽度大于650px小于980px时（液态布局）

@media screen and (max-width: 980px) {
        
     
        #pagewrap {
        
            width: 95%;
        }
     
        #content {
        
            width: 60%;
            padding: 3% 4%;
        }
     
     
    }

# 2.参考博客 #

[css适配不同分辨率屏幕][css]

[css]: https://blog.csdn.net/qq_36698956/article/details/81144435

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 rem适配

文章目录一、什么是rem？二、rem适配原理一、什么是rem？ rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍

短命女/ 2022年12月27日 02:26/ 0 赞/ 292 阅读

相关 css 局部放大适配safari

没加position属性之前，在Safari上鼠标hover之后会出现一个短暂的直角才会变为圆角。 / 图片hover放大 / .scaleBig

﹏ヽ暗。殇╰゛Y/ 2022年12月15日 12:40/ 0 赞/ 187 阅读

相关 css适配刘海屏手机

![20210702102618482.png][] 刘海屏的手机会出现的问题。底部的内容太靠底部边了有的可能还会被截断。底部是固定的fixed定位bottom：0 我

以你之姓@/ 2022年10月12日 01:07/ 0 赞/ 227 阅读

相关 css 适配

文章目录 1.自己已经实践的部分 2.参考博客 1.自己已经实践的部分当浏览器可视部分宽度小于480px时 @media scree

冷不防/ 2022年09月10日 08:11/ 0 赞/ 208 阅读

相关 Android适配

![SouthEast][] Android 系统会自己根据手机的大小，系统的一些设置，来找到对应的文件夹，从而达到不同的手机上面的适配问题。 /

向右看齐/ 2022年08月24日 00:52/ 0 赞/ 217 阅读

相关 UI适配

转载自：http://blog.csdn.net/yxriyin/article/details/46800241 对于网上各种适配方法，说明的有很多，但我认为大部分都是自己

阳光穿透心脏的1/2处/ 2022年08月22日 00:09/ 0 赞/ 218 阅读

相关 Android适配（屏幕适配、国际化适配）

首先来说一下Android的屏幕适配：　　关于Android屏幕的一些基本概念知识，自行充电。。在此只介绍实际开发过程中的使用　　1、说到Android的屏幕适配，

男娘i/ 2022年08月06日 09:16/ 0 赞/ 391 阅读

相关网页适配

/适配跳转/ if(/Android|webOS|iPhone|iPod|BlackBerry|SymbianOS/i.test(navigator.userAgent

ゝ一纸荒年。/ 2022年06月11日 02:52/ 0 赞/ 255 阅读

相关设备适配

H5标准声明，使用 HTML5 doctype，不区分大小写标准的 lang 属性写法声明文档使用的字符编码优先使用 IE 最新版本和 Chrome 页面描述页面关键词

Myth丶恋晨/ 2022年01月20日 05:57/ 0 赞/ 280 阅读

相关 css水果机媒介查询适配

/iphoneX、iphoneXS适配/ @media only screen and (device-width: 375px) and (device-he

不念不忘少年蓝@/ 2021年10月23日 22:15/ 0 赞/ 279 阅读