zoukankan      html  css  js  c++  java
  • 做webapp静态页面的一些积累

    ​1)根据pad,手机不同的版本的屏幕大小设置字体的大小(可以使用此方式根据屏幕的不同进行设置,由于我左边的图片是设置的float='left',使用的是img标签的百分比来显示图片)

    (使用此方式,有可能会造成各个设置的屏幕的范围会互相影响,要注意每个范围的加载顺序,因此我的布局 就宽度设置百分比,高度设置了具体的值,字体就稍微设置了小点)

    (网上看了很多关于字体随页面的大小而改变的文章,关于处理谷歌默认的最小字体是12px,我试了很多但是都不支持,

    PC桌面版Chrome 27正式取消了-webkit-text-size-adjust:none;属性的支持,

    这种方式会改变字体的大小,但是它一行的字数也没改变,如下:

    @media screen and (min-320px) and (max- 568px){

            p{  font-size:12px; 

      -webkit-transform-origin-x: 0;                //离左边框的距离

                -webkit-transform: scale(0.75);   }

                img{135%}

        }

    12×0.75=9,对于其它浏览器来说,12px以下的字号都是可以识别的,这里仅需要对于Chrome浏览器进行缩放。

            @media screen and (min-768px) and (max-1024px){

             p{font-size:14px;}

    img{90%}

        }

    @media screen and (min-375px){

            p{font-size:12px;}

    img{120%}

        }

    @media screen  and (max- 640px){

            p{font-size:12px;}

           img{100%}

        } 

  • 相关阅读:
    简述 JPA 与 Spring Data JPA 与 Hibernate
    idea不识别yml配置文件,怎么办?
    Java 数组如何转成List集合
    git关于 LF 与 CRLF
    git报错:src refspec master does not match any
    蓝桥杯- 基础练习:十六进制转八进制
    蓝桥杯- 基础练习:数列排序
    蓝桥杯-入门训练 :A+B问题
    蓝桥杯-入门训练 :序列求和
    蓝桥杯-入门训练 :圆的面积
  • 原文地址:https://www.cnblogs.com/chen-yun/p/6208311.html
Copyright © 2011-2022 走看看