css移动端介绍

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情 >>

前言：今天来给大家介绍一下移动端及其一些基本的概念，也方便大家更好的掌握相关内容，下面大家一起来看看吧！ 一.移动端介绍

 在不通的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰
 
        24寸 1920x1080
        
        i6 4.7寸 750 x 1334
        
        智能手机的像素点 远远小于 计算机的像素点
        
        问题：一个宽度为900px的网页在iphone6中要如何显示呢？
        
        默认情况下，移动端的网页都会将视口设置为980像素（css像素）
        
            以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，
                移动端的浏览器会自动对网页缩放以完整显示网页
                
        https://material.io/resources/devices/
        
        所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，
            为了解决这个问题，大部分网站都会专门为移动端设计网页
            
复制代码

二.移动端页面

移动端默认的视口大小是980px(css像素)，

        默认情况下，移动端的像素比就是  980/移动端宽度  （980/750）
        
        如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好
        ，
            导致网页中的内容非常非常的小
        编写移动页面时，必须要确保有一个比较合理的像素比：
            1css像素 对应 2个物理像素
            1css像素 对应 3个物理像素
        - 可以通过meta标签来设置视口大小
        - 每一款移动设备设计时，都会有一个最佳的像素比，
            一般我们只需要将像素比设置为该值即可得到一个最佳效果
            将像素比设置为最佳像素比的视口大小我们称其为完美视口
            将网页的视口设置为完美视口
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
注：    <!-- 设置视口大小 device-width表示设备的宽度（完美视口）-->

<!-- <meta name="viewport" content="width=device-width"> -->   
         
         结论：以后再写移动端的页面，就把上边这个玩意先写上
            
            
          
复制代码

三.总结

   今天的内容就到这里了，今天更新的也只是一些基础的知识而已，希望大家继续学习！

作者：Adopt
链接：juejin.cn/post/713354… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。