做webapp静态页面的一些积累

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

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

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

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

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

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

        p{  font-size:12px; 

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

            -webkit-transform: scale(0.75);   }

            img{width:135%}

    }

）

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

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

         p{font-size:14px;}

img{width:90%}

    }

@media screen and (min-width:375px){

        p{font-size:12px;}

img{width:120%}

    }

@media screen  and (max-width: 640px){

        p{font-size:12px;}

       img{width:100%}

    } 

转载于:https://www.cnblogs.com/chen-yun/p/6208311.html