使用@media screen实现网页布局的自适应(手机端,pc,平板自适应)

适用场景

在一些场景下flex布局也不一定全部适用(手机,pc,平板),因而用到了这种方式,针对不同设备进行不同的样式选择,提升用户体验。

创建html文件

使用vs code编辑器,快捷键(!+tab)创建一个html模板
使用@media screen实现网页布局的自适应(手机端,pc,平板自适应)_第1张图片
其他编辑器也可把这一段代码复制过去




    
    
    
    Document


    


创建一个div,并编写style

可以直接复制过去





    
    
    
    Document



    
内容

总结

min-width 最小宽度
max-width 最大宽度
min-height 最小高度
max-height 最大高度
@media only screen and 这里加对应的条件{
这里就对应的css样式
}

打开浏览器进行观察

按下f12(笔记本为fn+f12)点击 调试器里面的小手机图标
在这里插入图片描述
在ipad,iphone x,iphone 8中会展示如下不同的样式
使用@media screen实现网页布局的自适应(手机端,pc,平板自适应)_第2张图片
使用@media screen实现网页布局的自适应(手机端,pc,平板自适应)_第3张图片
使用@media screen实现网页布局的自适应(手机端,pc,平板自适应)_第4张图片

你可能感兴趣的:(前端的小坑坑)