分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

自适应网页设计?

发布时间:2023-09-06 01:52责任编辑:蔡小小关键词:自适应网页设计

1.设置不同屏幕下的显示方式:col-lg-2....

2.允许网页宽度自动调整:在网页代码头部加一个viewport标签

3.不能使用绝对宽度?--只能指定百分比宽度和width:auto;

4.相对大小字体:不能使用px,最好使用em

默认页面字体的大小像素是16像素

所以设置1.5em=1.5*16=24

设置0.875em=0.875*16=14

5.流式布局

流式布局是每个区块的位置都是浮动的,不是固定的,(浮动+百分比宽度)

float的好处就是如果宽度大小放不下内容时,后面元素会自动滚动到前面元素的不会在水平方向overflow溢出,避免水平滚动条出现。

6.选择加载css---用@media 解决,分别设置不同屏幕下加载的大小

7.图片的自适应--在样式中加入img{ max-width:100%;}老版本ie不支持max-width,所以写为img{ width:100%;}

自适应网页设计?

原文地址:https://www.cnblogs.com/duanzhange/p/8986600.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved