用HTML和css写的界面适应手机界面小结

用html和css写得页面要适应各种手机屏幕的话，写的时候要注意以下几点：

整体页面的宽度用百分之比表示，任意一个要设置宽度的元素都用百分比表示。比如在整体的上设 width:100%;
要适应各个手机，在头部加入以下几段代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no">
这段代码的具体意思是

content属性值 :
width:可视区域的宽度，值可为数字或关键词device-width（设备的物理宽度）//这样就可以很大程度上的适应各个移动设备。而（width指的是页面宽度。）
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
在设置图片的时候要记得设置一张照片在页面上的宽度百分比。比如一张照片占一个界面的百分之30%。不能写死成孤单的px值，如果写死，就不能根据浏览器的大小（模拟手机屏幕大小）来进行图片的伸缩。
比如以下代码：
<div class="pic_all"> <img src="banli_1.jpg"/> </div>
的css格式：
.pic_all img{ width: 100%; }
这样我改变浏览大小，照片也是跟着改变的。
改变浏览器大小图片的效果显示：
说明照片都是自适应的。
当然更多手机移动端的适应还要结合响应式设计那些。这个只是初学者小结。

用HTML和css写的界面适应手机界面小结相关推荐

android界面设计所用中文什么字体,「界面」手机界面设计字体大小知多少
今天我们来讨论一下界面字体大小的问题,上篇文章我们讨论到使用什么字体的问题,这篇文章我们主要讨论手机界面设计中字体应该多大的问题. 做移动界面和做网页,平面最大的不同之处在于当你使用软件设计的时候,你 ...
HTML+CSS写一个简单的网页界面
学习了HTML和CSS入门的基本命令后,写出来一个简单的登录网页界面,可以跳转.登录. 主界面代码(log.html) <!DOCTYPE html> <html><he ...
用HTML和CSS写注册登录界面
一.结果演示注册界面: 登录界面: 二.主要代码展示 1.HTML部分 1.注册界面对于注册界面,可以将其划分为三个部分,分别为左边的"新用户注册",中间的主体部分,以及右边的 ...
HTML+CSS实现炫酷的登录界面
你好,我是罡罡同学! 代码谱第一页忘掉心上人,最后一页...... 谢谢大家的支持,您的一键三连是罡罡同学前进的最大动力! 打赏一点钱,帮我买包辣条,继续创作,谢大家! 一键三连一键三连一键三连 ...
纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...
css写出三角形（兼容IE）
利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; border-right: ...
[css] 写出主流浏览器内核私有属性的css前缀
[css] 写出主流浏览器内核私有属性的css前缀完善一下: Chrome:Blink内核 -webkit-Safari:WebKit内核 -webkit-Firefox :Gecko内核 -moz ...
[css] 写出你知道的CSS水平和垂直居中的方法
[css] 写出你知道的CSS水平和垂直居中的方法 flex布局水平垂直居中: <div class="outer"><di ...
[css] 写例子说明如何强制（自动）中、英文换行与不换行
[css] 写例子说明如何强制(自动)中.英文换行与不换行 word-break:break-all;只对英文起作用,以字母作为换行依据word-wrap:break-word; 只对英文起作用,以单 ...

用HTML和css写的界面适应手机界面小结

用HTML和css写的界面适应手机界面小结相关推荐

最新文章

热门文章